我想用标签实现多个标记(在此处记录:http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0.1/docs/examples.html),我在编写代码时遇到了一些问题。
例如,对于2个标记,您必须使用以下代码:
var latlng1 = new google.maps.LatLng(49, -123);
var latlng2 = new google.maps.LatLng(48, -123);
var marker1 = new MarkerWithLabel({
position: latlng1,
draggable: true,
map: map,
labelContent: "abcd",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 0.75}
});
var marker2 = new MarkerWithLabel({
position: latlng2,
draggable: true,
map: map,
labelContent: "efgh",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels",
labelStyle: {opacity: 0.75}
});
这没关系,但10个标记呢?我希望能够做到这样的事情:
var locations = [
new google.maps.LatLng(49, -123),
new google.maps.LatLng(48, -123),
];
var labels = [
"abcd",
"efgh",
];
问题在于,当我编写“for”函数时,地图不会显示任何标记。
for ( var i = 0; i < locations.length; i++ )
{
var marker = new MarkerWithLabel({
position: locations[i],
draggable: true,
labelContent: labels[i],
labelAnchor: new google.maps.Point(22,0),
labelClass: "labels",
labelStyle: {opacity: 0.85}});
}
我不擅长编程,所以,你能告诉我我做错了什么吗?
在此之后,当然会出现添加信息窗口的问题,但我们稍后再讨论。
感谢您的时间。
答案 0 :(得分:1)
请查看本文和参考网站了解更多详情:
Multiple marker with labels in google map
<script type="text/javascript">
//Generate Markers Value Array
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"title":'<%# Eval("Area") %>',
"lat": '<%# Eval("Latitute") %>',
"lng": '<%# Eval("Longitute") %>',
"description": '<%# Eval("Address") %>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
</script>
//
for (i = 1; i <= markers.length; i++) {
var data = markers[i-1]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new MarkerWithLabel({
position: myLatlng,
map: map,
title: data.title,
labelContent: i,
labelAnchor: new google.maps.Point(7, 30),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
参考:
答案 1 :(得分:0)
在你的for循环中你忘了包含
map: map,
在“draggable:true”下面
重要的是你需要告诉MarkerWithLabel添加标记的地图。您可能在页面上有多个地图。
答案 2 :(得分:0)
感谢您的回复。 是的,我忘了在上面的线程中包含map参数 - 我在代码中有它。
问题实际上与将图标与标记相关联有关:
new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/black01.png')
然后是02,03等。我没有相应地编写数组,因此代码实际上从未进入标记部分(这是正常的)。
for函数的内容如下所示:
var marker = new MarkerWithLabel({
position: locations[i],
draggable: true,
map: map,
icon: icons[i],
labelContent: labels[i],
labelAnchor: new google.maps.Point(22,0),
labelClass: "labels",
labelStyle: {opacity: 0.85}});
答案 3 :(得分:-1)
在循环之前,您需要先将标记声明为数组。
var marker = new Array();
然后只在循环
中将其指定为MarkerwithLabel类for ( var i = 0; i < locations.length; i++ )
{
marker = new MarkerWithLabel({ pro})
}