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

Google Maps API: Adding letters to my markers on my google map

提问by user414983

I'm trying to add a letter to my marker and then have multiple markers (14 to be accurate) with letters. l have so far done this without success. I'm a complete novice with code and google API.

我试图在我的标记上添加一个字母，然后有多个带有字母的标记（准确地说是 14 个）。到目前为止，我已经这样做了，但没有成功。我是一个完整的代码和谷歌 API 新手。

Can you tell what code l need to add and where?

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

Below is my code:

下面是我的代码：

<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">

Venue Location

场地位置

Thanks

谢谢

回答by sri_bb

Here is the code to add markers with alphabets. Run the loop for all the markers, index is each marker position

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

var 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

这是地图标记图标的列表

回答by Chris Broadfoot

Use the Charts API to generate markers:

使用 Charts API 生成标记：

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

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

回答by JP.

If you're trying to change the marker itself look at http://googlemapsmarkers.com- if you use their URL for your marker you can specify what the marker looks like:

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

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

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

回答by user2314737

Use the labeloption when defining the marker object like this:

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

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

From the Google Maps JavaScript API V3 Reference:

来自Google Maps JavaScript API V3 参考：

Type: string|MarkerLabel Adds a label to the marker. The label can either be a string, or a MarkerLabel object. Only the first character of the string will be displayed.

类型：string|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>

And here's the same demo on Jsfiddle

这是Jsfiddle上的相同演示