Google maps api 3 谷歌地图工具提示

不知是否有人能帮助我

我一直在为我放在谷歌地图上的标记制作工具提示。我可以让它工作，显示我希望用户看到的信息，在本例中是字段名称和地址，因此代码行是

title:name+address

有人能告诉我如何在这两者之间留出一个空格，以便工具提示显示“名称地址”而不是“名称地址”吗

我尝试过各种各样的方法，例如使用

标题：姓名+地址

，

标题：姓名+地址

，但我无法让它工作

任何帮助都将不胜感激

非常感谢

克里斯你可以试试这个

name + ' ' + address

注意：引号中需要一个空格，两边各有一个

+

。

您可以试试这个

name + ' ' + address

---

注意：引号中需要一个空格，两边都需要一个

+

。

我使用此函数初始化启动值：

//Inicialize map values
 function initialize() {

       latCenterMap=41.50347;
       lonCenterMap=-5.74638;
       zommCeneterMap=14;
       latPoint=41.50347;
       lonPoint=-5.74638;


        //Values default initialize
        var latlng = new google.maps.LatLng(latCenterMap, lonCenterMap);

        var mapOptions = {
             zoom: zommCeneterMap,
             center: latlng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas_'), mapOptions);    

        codePoint(map, lat, lon);                                     
}

我使用此函数将点位置的值设置到地图中

//Get position by Latitude and Longitude        
function codePoint(map, lat, lon) {

     var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lon)); 
     var title = "Your text";

     var iconPoint = new google.maps.MarkerImage('images/pointBlue.png',
        //Measure image
        new google.maps.Size(25,25),
        new google.maps.Point(0,0),
        //Half measure image
        new google.maps.Point(12.5,12.5)
     );

     marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: iconPoint,
        tooltip: title
     });

     customTooltip(marker);
}

我使用此函数创建指向点位置的工具提示

//TOOLTIP
function customTooltip(marker){

    // Constructor function
    function Tooltip(opts, marker) {
        // Initialization
        this.setValues(opts);
        this.map_ = opts.map;
        this.marker_ = marker;
        var div = this.div_ = document.createElement("div");
        // Class name of div element to style it via CSS
        div.className = "tooltip";
        this.markerDragging = false;
    }

    Tooltip.prototype = {
        // Define draw method to keep OverlayView happy
        draw: function() {},

        visible_changed: function() {
            var vis = this.get("visible");
            this.div_.style.visibility  = vis ? "visible" : "hidden";
        }, 

        getPos: function(e) {   
            var projection = this.getProjection();
            // Position of mouse cursor
            var pixel = projection.fromLatLngToDivPixel(e.latLng);
            var div = this.div_;

            // Adjust the tooltip's position
            var gap = 15;
            var posX = pixel.x + gap;
            var posY = pixel.y + gap;

            var menuwidth = div.offsetWidth;
            // Right boundary of the map
            var boundsNE = this.map_.getBounds().getNorthEast();
            boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);

            if (menuwidth + posX > boundsNE.pixel.x) {
                posX -= menuwidth + gap;
            }
            div.style.left = posX + "px";
            div.style.top = posY + "px";

            if (!this.markerDragging) {
                this.set("visible", true);
            }                
        }, 
        // This is added to avoid using listener (Listener is not working when Map is quickly loaded with icons)
        getPos2: function(latLng) { 
            var projection = this.getProjection();
            // Position of mouse cursor
            var pixel = projection.fromLatLngToDivPixel(latLng);
            var div = this.div_;
            // Adjust the tooltip's position
            var gap = 5;
            var posX = pixel.x + gap;
            var posY = pixel.y + gap;
            var menuwidth = div.offsetWidth;
            // Right boundary of the map
            var boundsNE = this.map_.getBounds().getNorthEast();
            boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);
            if (menuwidth + posX > boundsNE.pixel.x) {
                posX -= menuwidth + gap;
            }
            div.style.left = posX + "px";
            div.style.top = posY + "px";
            if (!this.markerDragging) {
                this.set("visible", true);
            }
        },  

        addTip: function() {
            var me = this;
            var g = google.maps.event;
            var div = me.div_;
            div.innerHTML = me.get("text").toString();
            // Tooltip is initially hidden
            me.set("visible", false);
            // Append the tooltip's div to the floatPane
            me.getPanes().floatPane.appendChild(this.div_);
            // In IE this listener gets randomly lost after it's been cleared once.
            // So keep it out of the listeners array.
            g.addListener(me.marker_, "dragend", function() {
                me.markerDragging = false; });
                // Register listeners
                me.listeners = [
                //   g.addListener(me.marker_, "dragend", function() {
                //   me.markerDragging = false; }), 
                    g.addListener(me.marker_, "position_changed", function() {
                        me.markerDragging = true;
                        me.set("visible", false); }),

                    g.addListener(me.map_, "mousemove", function(e) {
                        me.getPos(e); })
            ];
            },

            removeTip: function() {

                // Clear the listeners to stop events when not needed.
                if (this.listeners) {
                    for (var i = 0, listener; listener = this.listeners[i]; i++) {
                        google.maps.event.removeListener(listener);
                    }
                    delete this.listeners;
                }
                // Remove the tooltip from the map pane.
                var parent = this.div_.parentNode;
                    if (parent) parent.removeChild(this.div_);
                }
            };

        function inherit(addTo, getFrom) {

          var from = getFrom.prototype;  // prototype object to get methods from
          var to = addTo.prototype;      // prototype object to add methods to
          for (var prop in from) {
           if (typeof to[prop] == "undefined") to[prop] = from[prop];
          }
         }

        // Inherits from OverlayView from the Google Maps API
        inherit(Tooltip, google.maps.OverlayView);

        var tooltip = new Tooltip({map: map}, marker);
        tooltip.bindTo("text", marker, "tooltip");

        google.maps.event.addListener(marker, 'mouseover', function() {
            tooltip.addTip();
            tooltip.getPos2(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'mouseout', function() {
            tooltip.removeTip();
        });
}  

我使用这种样式来创建css文件

//CSS
.tooltip { 
    position:absolute;
    top:0;
    left:0;
    z-index: 300; 
    width: 11.5em;
    padding: 5px;
    font-size: 12pt;
    font-family: klavika;
    color: #fff;
    background-color: #04A2CA;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.75);
}

---

我使用此函数初始化启动值：

//Inicialize map values
 function initialize() {

       latCenterMap=41.50347;
       lonCenterMap=-5.74638;
       zommCeneterMap=14;
       latPoint=41.50347;
       lonPoint=-5.74638;


        //Values default initialize
        var latlng = new google.maps.LatLng(latCenterMap, lonCenterMap);

        var mapOptions = {
             zoom: zommCeneterMap,
             center: latlng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map-canvas_'), mapOptions);    

        codePoint(map, lat, lon);                                     
}

我使用此函数将点位置的值设置到地图中

//Get position by Latitude and Longitude        
function codePoint(map, lat, lon) {

     var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lon)); 
     var title = "Your text";

     var iconPoint = new google.maps.MarkerImage('images/pointBlue.png',
        //Measure image
        new google.maps.Size(25,25),
        new google.maps.Point(0,0),
        //Half measure image
        new google.maps.Point(12.5,12.5)
     );

     marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: iconPoint,
        tooltip: title
     });

     customTooltip(marker);
}

我使用此函数创建指向点位置的工具提示

//TOOLTIP
function customTooltip(marker){

    // Constructor function
    function Tooltip(opts, marker) {
        // Initialization
        this.setValues(opts);
        this.map_ = opts.map;
        this.marker_ = marker;
        var div = this.div_ = document.createElement("div");
        // Class name of div element to style it via CSS
        div.className = "tooltip";
        this.markerDragging = false;
    }

    Tooltip.prototype = {
        // Define draw method to keep OverlayView happy
        draw: function() {},

        visible_changed: function() {
            var vis = this.get("visible");
            this.div_.style.visibility  = vis ? "visible" : "hidden";
        }, 

        getPos: function(e) {   
            var projection = this.getProjection();
            // Position of mouse cursor
            var pixel = projection.fromLatLngToDivPixel(e.latLng);
            var div = this.div_;

            // Adjust the tooltip's position
            var gap = 15;
            var posX = pixel.x + gap;
            var posY = pixel.y + gap;

            var menuwidth = div.offsetWidth;
            // Right boundary of the map
            var boundsNE = this.map_.getBounds().getNorthEast();
            boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);

            if (menuwidth + posX > boundsNE.pixel.x) {
                posX -= menuwidth + gap;
            }
            div.style.left = posX + "px";
            div.style.top = posY + "px";

            if (!this.markerDragging) {
                this.set("visible", true);
            }                
        }, 
        // This is added to avoid using listener (Listener is not working when Map is quickly loaded with icons)
        getPos2: function(latLng) { 
            var projection = this.getProjection();
            // Position of mouse cursor
            var pixel = projection.fromLatLngToDivPixel(latLng);
            var div = this.div_;
            // Adjust the tooltip's position
            var gap = 5;
            var posX = pixel.x + gap;
            var posY = pixel.y + gap;
            var menuwidth = div.offsetWidth;
            // Right boundary of the map
            var boundsNE = this.map_.getBounds().getNorthEast();
            boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);
            if (menuwidth + posX > boundsNE.pixel.x) {
                posX -= menuwidth + gap;
            }
            div.style.left = posX + "px";
            div.style.top = posY + "px";
            if (!this.markerDragging) {
                this.set("visible", true);
            }
        },  

        addTip: function() {
            var me = this;
            var g = google.maps.event;
            var div = me.div_;
            div.innerHTML = me.get("text").toString();
            // Tooltip is initially hidden
            me.set("visible", false);
            // Append the tooltip's div to the floatPane
            me.getPanes().floatPane.appendChild(this.div_);
            // In IE this listener gets randomly lost after it's been cleared once.
            // So keep it out of the listeners array.
            g.addListener(me.marker_, "dragend", function() {
                me.markerDragging = false; });
                // Register listeners
                me.listeners = [
                //   g.addListener(me.marker_, "dragend", function() {
                //   me.markerDragging = false; }), 
                    g.addListener(me.marker_, "position_changed", function() {
                        me.markerDragging = true;
                        me.set("visible", false); }),

                    g.addListener(me.map_, "mousemove", function(e) {
                        me.getPos(e); })
            ];
            },

            removeTip: function() {

                // Clear the listeners to stop events when not needed.
                if (this.listeners) {
                    for (var i = 0, listener; listener = this.listeners[i]; i++) {
                        google.maps.event.removeListener(listener);
                    }
                    delete this.listeners;
                }
                // Remove the tooltip from the map pane.
                var parent = this.div_.parentNode;
                    if (parent) parent.removeChild(this.div_);
                }
            };

        function inherit(addTo, getFrom) {

          var from = getFrom.prototype;  // prototype object to get methods from
          var to = addTo.prototype;      // prototype object to add methods to
          for (var prop in from) {
           if (typeof to[prop] == "undefined") to[prop] = from[prop];
          }
         }

        // Inherits from OverlayView from the Google Maps API
        inherit(Tooltip, google.maps.OverlayView);

        var tooltip = new Tooltip({map: map}, marker);
        tooltip.bindTo("text", marker, "tooltip");

        google.maps.event.addListener(marker, 'mouseover', function() {
            tooltip.addTip();
            tooltip.getPos2(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'mouseout', function() {
            tooltip.removeTip();
        });
}  

我使用这种样式来创建css文件

//CSS
.tooltip { 
    position:absolute;
    top:0;
    left:0;
    z-index: 300; 
    width: 11.5em;
    padding: 5px;
    font-size: 12pt;
    font-family: klavika;
    color: #fff;
    background-color: #04A2CA;
    border-radius: 10px;
    box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.75);
}

---

真是太棒了。非常感谢你。向克里斯致意这绝对是鲁特利的杰作。非常感谢你。问候克里斯