Google 地图标签

Question

我有以下代码在 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);
}

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

我在编码方面不是很有经验，因此不胜感激。

谢谢

Answer 1

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

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

Answer 2

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

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

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

Answer 3

您只需要如下编辑您的标记点击事件函数。

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

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

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

Google 地图标签

Google Maps label

javascript

google-maps

google-maps-markers