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"

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

4

2 回答 2

1

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

于 2012-06-09T13:06:37.953 回答
1

您可以保留带星号的图钉图标，并在其旁边添加一个不显眼的标签。这个标签可以说任何东西，但我只保留了一个数字。它是MarkerWithLabel 库（在此处下载）

演示 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 };
      ...
于 2012-06-09T15:37:50.473 回答