[英]Google Map markers - add a custom icon with a unique label for each marker
I have implemented a google map with multiple markers but what i am failing to do is how to add a unique label for each marker ie Each marker needs have a letter: 我已经实现了带有多个标记的google map,但是我没能做的是如何为每个标记添加唯一的标签,即每个标记都需要有一个字母:
eg 例如
Marker 1 needs to display 'A' 标记1需要显示“ A”
Marker 2 needs to display 'B' 标记2需要显示“ B”
Marker 3 needs to display 'C' 标记3需要显示“ C”
Marker 4 needs to display 'D' 标记4需要显示“ D”
... ...
an example of what i am trying to achieve is: http://www.athenos.com/locator/ --- enter 11205 in the zip search 我尝试实现的示例是: http : //www.athenos.com/locator/-在zip搜索中输入11205
here is a portion of my map code - my init and add_marker methods: 这是我的地图代码的一部分-我的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);
});
},
... ...
Please help. 请帮忙。 Thanks in advance
提前致谢
just try to locate your icon, in marker's prop, at this url: http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|00FF00|000000 只需尝试在标记的道具中通过以下网址找到您的图标即可: http : //chart.apis.google.com/chart? chst= d_map_pin_letter& chld=7| 00FF00|000000
So iterate with letters over the first part of the chld querystring parameter, and don't forget to choose your marker's color (latest two part, pipe separated) 因此,请在chld querystring参数的第一部分上使用字母进行迭代,并且不要忘记选择标记的颜色(最后两部分,用管道分隔)
Take a look at the article below. 看看下面的文章。 It's very simple.
非常简单 Use a marker with numeric labels or a marker with alphabet label (A,B..)
使用带有数字标签的标记或带有字母标签的标记(A,B ..)
Multiple marker with labels in google map Google地图中带有标签的多个标记
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);
}
Go to this article for more details 转到本文了解更多详细信息
Multiple marker with labels in google map Google地图中带有标签的多个标记
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.