谷歌地图工具提示

Question

我想知道是否有人可以帮助我。

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

有人可以告诉我如何在这些之间放置一个空格，以便工具提示会显示“名称地址”而不是“名称地址”。

我已经使用例如 title: name'_'+ address、title: name' '+address 尝试了各种方法，但无法让它工作。

任何帮助将不胜感激。

非常感

谢克里斯

Answer 1

您可以尝试这个

name + ' ' + address

注意：引号中需要一个空格，并且两侧需要一个 + 。

Answer 2

我使用这个函数来初始化起始值：

//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);
}