谷歌地图标签答案

【问题标题】：Google Maps label谷歌地图标签
【发布时间】：2015-12-20 09:29:24
【问题描述】：

我有以下代码在 Google 地图上创建标记：

function initializeMap() {

    var lat = '-32.089608'; //Set your latitude.
    var lon = '115.933216'; //Set your longitude.

    var centerLon = lon - 0.0105;

    var myOptions = {
        scrollwheel: false,
        draggable: false,
        disableDefaultUI: true,
        center: new google.maps.LatLng(lat, centerLon),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	
    //Bind map to elemet with id map-canvas
    var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
	var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lon),
    });

    var infowindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, 'click', function () {
		infowindow.open(map, marker);
    });

    infowindow.open(map, marker);
}

我想将自定义文本添加到默认标记上方的指针，但我不知道该怎么做。目前它在默认标记上方显示一个小空框。（由于缺少信誉点，我无法发布示例图片。

我对编码不是很有经验，因此感谢任何帮助。

谢谢

【问题讨论】：

标签： javascript google-maps google-maps-markers

【解决方案1】：

您只需将content 添加到您的infowindow：

var infowindow = new google.maps.InfoWindow({
   content: 'abcxyz'
});

【讨论】：

【解决方案2】：

我怀疑标准库是否支持这一点。

但您可以使用谷歌地图实用程序库：

https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var marker = new MarkerWithLabel({
   position: myLatlng,
   map: map,
   draggable: true,
   raiseOnDrag: true,
   labelContent: "A",
   labelAnchor: new google.maps.Point(3, 30),
   labelClass: "labels", // the CSS class for the label
   labelInBackground: false
 });

关于标记的基础知识可以在这里找到：

https://developers.google.com/maps/documentation/javascript/overlays#Markers

Google Maps API v3 marker with label

【讨论】：

【解决方案3】：

您只需要编辑您的标记点击事件功能，如下所示。

 google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
            infoWindow.setContent('abcdxyz'); // add this line to your existing code
        });

有了这个，您可以处理多个标记的多个 infoWindow。此外，如果您想在鼠标悬停时显示内容，则可以使用标记的title 属性，例如：

var marker = new google.maps.Marker({
            position: {lat:lat, lng:lng},
            map: map,
            title: 'abcXYZ' // this will be displayed on marker mousover
        });

【讨论】：