在Google地图中带有标签的多个标记

问题描述：

我想用标签实现多个标记（此处记录：http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.0.1/docs/examples.html），并且在编写代码时遇到了一些问题。在Google地图中带有标签的多个标记

对于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 (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}}); 
}

我不是很擅长编程，所以，你能告诉我我做错了什么吗？

之后，当然有添加信息窗口的问题，但我们稍后再讨论。

谢谢你的时间。

答

在你的for循环，你忘了，包括

map: map,

下面“可拖动：真正的”

这个重要的原因是，你需要告诉MarkerWithLabel什么地图添加标记了。您可能在页面上有多个地图。

答

感谢您的回复。是的，我忘了在上面的线程中包含map参数 - 我在代码中使用了它。

这个问题实际上曾与图标标记关联的事：

new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/black01.png')

其次是02，03等我并没有相应写入阵列，使得码从来没有真正去到标记部（这是确定的）。

的function的内容是这样的：

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}});

答

循环之前，你需要首先声明标记为一个数组。

var marker = new Array();

那么只有将其指定为MarkerwithLabel类环

for (var i = 0; i < locations.length; i++) 
{ 
    marker = new MarkerWithLabel({ pro}) 

}

答

看看这篇文章，参考网站，了解详情里面：

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); 

    }

参考：

Multiple marker with labels in google map with Asp.net

在Google地图中带有标签的多个标记

相关推荐