如何在Google地图V3中为每个标记添加编号？

Question

如何在Google地图V3中为每个标记添加编号？

javascriptgoogle-maps-api-3google-maps-markers

3

我希望向大家请教如何使用JavaScript在Google Maps v3上动态添加每个标记的数字。例如，第一个标记为1，第二个标记为2，以此类推。在这种情况下，我有以下位置数据：

[
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000), 
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(1.3667, 103.8000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.0000, 9.0000),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(51.5142, -0.0931),
 new google.maps.LatLng(54.0000, -2.0000),
 new google.maps.LatLng(51.6000, -1.2500),
 new google.maps.LatLng(51.7500, -1.2500)
];

但这些数据是动态变化的。因此，对于第一个位置的纬度/经度，我将在第一个标记上给出数字1，第二个标记为数字2，以此类推。并且我已经使用以下图标来标识每个标记：

"http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900"

我需要改变标记图标吗？我真的需要您的建议或示例代码来解决这个问题。请帮忙，非常感谢您的帮助。

- chumyee

2个回答

1

你可以保留你的星标图标并在其旁边添加一个不显眼的标签。这个标签可以是任何内容，但我将其简单地设置为一个数字。使用的是 MarkerWithLabel 库 (在此下载) 演示 http://jsfiddle.net/yV6xv/21/

pin with number

你需要为它定义一个 CSS。

  .labels {
     color: blue;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 25px;
     border: 1px solid black;
     white-space: nowrap;
   }

使用MarkerWithLabel替换您的常规标记：

for (var i = 0; i < point.length; i++) {
    var marker = new MarkerWithLabel({
        map: map,
        position: point[i],
        icon: pinImage,
        shadow: pinShadow,
        labelContent: i,
        labelAnchor: new google.maps.Point(12, -5),
        labelClass: "labels"
    });
}

包括在HTML文件中。

  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
      .labels {
        color: blue;
        background-color: white;
        font-family: "Lucida Grande", "Arial", sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        width: 25px;
        border: 1px solid black;
        white-space: nowrap;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>

    <script type="text/javascript">
      var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
      ...

- Tina CG Hoehr

非常感谢您的帮助（再次）。所以，我想问一下关于您的回答。对于 markerwithlabel_packed.js，我从未听说过这个脚本。尤其是对于像我这样的新手来说，理解起来真的很困难。但是我会努力学习，即使需要很长时间。至于 CSS，我需要制作新文件吗？还是我只需将其添加到我的 JavaScript 中？非常感谢您。 - chumyee

它能够工作，Lilina。我很高兴尝试这个。这都是因为你的帮助。非常非常感谢你做的一切，Lilina :) - chumyee

好的，我该如何使点数组成为动态的呢？我的意思是，不是硬编码我的纬度/经度，而是如果我使用ajax从数据库中获取一组纬度/经度，然后再执行此操作。但这对我来说不起作用，因为地图先加载，然后才是ajax调用..有什么解决办法吗？ - Faizan

@Faizan 我建议你开一个新的问题。我忘了如何使用Javascript。 - Tina CG Hoehr

对于使用此代码的人，JavaScript 有更新版本，请查看 http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/然而，我的代码适用于 v1.1.5 而不是 v1.1.9。您可以自行决定如何处理。 - RHok

显示剩余6条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chad Killingsworth · Accepted Answer

您可以用多种方式来实现这个目标。一种方法是更改标记图像，但这需要您制作所有这些标记图像。另一种方法是使用StyledMarker库，该库是Google Maps API实用程序库的一部分。