Google Maps API：在我的谷歌地图上的标记中添加字母

Question

我正在尝试向我的标记添加一个字母，然后有多个带有字母的标记（准确地说是 14 个）。到目前为止，我一直没有成功。我是一个完全没有代码和谷歌 API 的新手。

你能告诉我需要添加什么代码以及在哪里添加吗？

下面是我的代码：

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=....
  type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
  if (GBrowserIsCompatible()) {

    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GOverviewMapControl());
    map.addControl(new GScaleControl());


    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = 0; i < 10; i++) {
    var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    map.addOverlay(new GMarker(point));

    var point = new GLatLng(lat,ling);
    map.setCenter(point, 10);
    var marker = new GMarker(point);
    map.addOverlay(marker);

}

   GEvent.addListener(map, "moveend", function() {
   var center = map.getCenter();
   document.getElementById("message").innerHTML = center.toString();
   });



    map.setCenter(new GLatLng(lat,ling), 7);

  }
}
//]]>
</script>
<style type="text/css">

场地位置

谢谢

Answer 1

这是添加带有字母的标记的代码。对所有标记运行循环，索引是每个标记位置

let letter = String.fromCharCode("A".charCodeAt(0) + index),
marker = new google.maps.Marker({
    map: this.map,
    position: latLongObj,
    icon: "http://maps.google.com/mapfiles/marker" + letter + ".png",
    animation: google.maps.Animation.DROP
});

Here is the list of map marker icons

Answer 2

使用 Charts API 生成标记：

http://code.google.com/apis/chart/docs/gallery/dynamic_icons.html#pins

Answer 3

如果您尝试更改标记本身，请查看http://googlemapsmarkers.com - 如果您使用他们的 URL 作为标记，您可以指定标记的外观：

http://googlemapsmarkers.com/v1/A/ff00ff/

Answer 4

在定义标记对象时使用label 选项，如下所示：

   markerB = new google.maps.Marker({
        position: pointB,
        title: "point B",
        label: "B",
        map: map
    })

来自Google Maps JavaScript API V3 Reference：

类型：字符串|MarkerLabel 向标记添加标签。标签可以 可以是字符串，也可以是 MarkerLabel 对象。只有第一个字符 将显示字符串。

function initMap() {
  var pointA = new google.maps.LatLng(51.2750, 1.0870),
    pointC = new google.maps.LatLng(50.8429, -0.1313),
    pointB = new google.maps.LatLng(51.5379, 0.7138),
    myOptions = {
      zoom: 7,
      center: pointA,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
    markerA = new google.maps.Marker({
      position: pointA,
      title: "point A",
      label: "AAA",
      map: map
    }),
    markerB = new google.maps.Marker({
      position: pointB,
      title: "point B",
      label: "B",
      map: map
    }),
    markerC = new google.maps.Marker({
      position: pointC,
      title: "point C",
      label: "C",
      map: map
    });
}

initMap();

html,
 body {
   height: 100%;
   margin: 0;
   padding: 0;
 }
 #map-canvas {
   height: 100%;
   width: 100%;
 }

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>


<div id="map-canvas"></div>

这里也是demo on Jsfiddle