谷歌地图标记 - 为每个标记添加一个带有唯一标签的自定义图标

Question

我已经实现了一个带有多个标记的谷歌地图，但我没有做的是如何为每个标记添加一个唯一标签，即每个标记都需要一个字母：
例如
标记 1 需要显示“A”
标记 2 需要显示“B”
标记 3 需要显示“C”
标记 4 需要显示“D”
...
我想要实现的一个示例是：http://www.athenos.com/locator/ --- 在 zip 搜索中输入 11205

这是我的地图代码的一部分 - 我的 init 和 add_marker 方法：

init : function() {

    var self = this;

    // set map property
    var map = new google.maps.Map(self.dom_element, self.options);
    self.map = map;

    // set some other shit
    new google.maps.Size(95, 77),
    new google.maps.Point(0,0),
    new google.maps.Point(47, 76);

    // creating new bounds 
    var bounds = new google.maps.LatLngBounds();

    // for loop to iterate through locations
    for (var i = 0; i < self.locations.length; i++) {

        // extend the bounds
        bounds.extend(self.locations[i].latlng);

        // add the marker
        self.add_marker(self.locations[i].latlng, i);
    }

    // centers the map based on the existing map markers
    self.map.fitBounds(bounds);
},

add_marker : function(latlng, marker_index) {
    var self = this;
    var marker = new google.maps.Marker({
        position: latlng,
        map: self.map,
        icon: self.map_icon,
        zIndex: 998,
        id: marker_index // give the marker an ID e.g. 0, 1, 2, 3 - use this for indexing the listed venues
    });

    google.maps.event.addListener(marker, 'mouseover', function(event) {

        var this_marker = this;
        // executes handler and passes the marker as 'this' and event data as an argument
        self.handle_marker_mouseover.call(self, this, event);
        this_marker.setZIndex(999);

    });

    google.maps.event.addListener(marker, 'mouseout', function(event) {

        // executes handler and passes the marker as 'this' and event data as an argument
        self.handle_marker_mouseout.call(self, this, event);


    });

    google.maps.event.addListener(marker, 'click', function(event) {

        // executes handler and passes the marker as 'this' and event data as an argument
        self.handle_marker_click.call(self, this, event);


    });
},

...

请帮忙。 提前致谢

Answer 1

只需尝试在以下网址中找到您的图标，在标记的道具中： http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|00FF00|000000

所以在 chld 查询字符串参数的第一部分使用字母进行迭代，不要忘记选择标记的颜色（最后两部分，管道分隔）

Answer 2

看看下面的文章。这很简单。使用带有数字标签的标记或带有字母标签的标记 (A,B..)

Multiple marker with labels in google map

for (i = 1; i <= markers.length; i++) {
    var letter = String.fromCharCode("A".charCodeAt(0) + i - 1);
    var data = markers[i - 1]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.title,
        icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
    });

    (function (marker, data) {
        google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent(data.description);
            infoWindow.open(map, marker);
        });
    })(marker, data);
}

更多详情请参阅本文

Multiple marker with labels in google map