如何在 Google 地图 v3 中的每个标记上添加编号？答案

【问题标题】：how to add numbering on each markers in Google maps v3?如何在 Google 地图 v3 中的每个标记上添加编号？
【发布时间】：2012-06-09 05:45:27
【问题描述】：

我想请教大家如何使用 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"

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

【问题讨论】：

标签： javascript google-maps-api-3 google-maps-markers

【解决方案1】：

您可以保留带星号的图钉图标，并在其旁边添加一个不显眼的标签。这个标签可以说任何东西，但我只保留了一个数字。它是MarkerWithLabel library (download here)

演示 http://jsfiddle.net/yV6xv/21/

你也需要为它定义一个 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 };
      ...

【讨论】：

非常感谢您的帮助（再次）。所以，我想问你关于你的答案。对于markerwithlabel_packed.js，我从来不知道那个脚本。这真的很难理解，尤其是对于像我这样的新手。但我试着去了解它，即使它需要很长时间来做。对于CSS，我需要制作新文件吗？或者我可以将它添加到我的 JavaScript 中？非常感谢你。
是的，markerwithlabel_packed 令人困惑，因为它是为了节省带宽。需要做的是将 .labels 添加到样式标签中，并像包含 google maps API 一样包含markerwithlabel。如果您想格外小心，请下载该文件并包含本地副本。请看我更新答案的结尾。
哦，@Lilina，我会尽快尝试。在看到您更新的答案后，我现在明白了。对于markerwithlabel，您可以在库中包含Google Maps API 之类的链接。如果我将它保存在我的本地磁盘中，那么链接会是什么样的？是不是这样：如果我错了，请纠正我。谢谢莉莉娜...
对于本地副本，最好使用相对路径，我的意思是，把它和你的php文件放在同一个文件夹里，写 script type="text/javascript" src="markerwithlabel_packed.js"我建议您保存文件，因为一旦我看到远程文件被更改并且我的应用程序崩溃了。
我会告诉你莉莉娜... :)

【解决方案2】：

您可以通过多种方式做到这一点。更改标记图像是其中之一，但需要您制作所有这些标记图像。另一种是使用StyledMarker library，它是Google Maps API Utility Library的一部分。

【讨论】：

先生。乍得，你能举个例子吗？我是新手，所以我不知道如何处理 StyledMarker 库...谢谢
我链接的 StyledMarker 库既有文档也有示例，例如：google-maps-utility-library-v3.googlecode.com/svn/trunk/…
所以我们只有 StyledMarker.js 文件，然后我们在地图文件中调用该类，不是吗？谢谢