谷歌地图中带有标签的多个标记答案

【问题标题】：Multiple markers with labels in Google Maps谷歌地图中带有标签的多个标记
【发布时间】：2011-06-12 21:03:48
【问题描述】：

我想用标签实现多个标记（在此处记录：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}});
}

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

在这之后，当然还有添加信息窗口的问题，但我们稍后再谈。

感谢您的宝贵时间。

【问题讨论】：

标签： google-maps google-maps-markers labels

【解决方案1】：

在你的 for 循环中你忘了包含

map: map,

在“可拖动：true”下方

这很重要的原因是您需要告诉 MarkerWithLabel 还要添加标记的地图。页面上可能有多个地图。

【讨论】：

【解决方案2】：

感谢您的回复。是的，我忘了在上面的线程中包含 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】：

查看这篇文章和参考网站了解更多详情：

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

【讨论】：

【解决方案4】：

在循环之前，您需要先将标记声明为数组。

var marker = new Array();

然后只在循环内将其分配为 MarkerwithLabel 类

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

}

【讨论】：