3

JavaScript を使用して、Google マップ v3 の各マーカーに動的に番号を追加する方法についてお聞きしたいと思います。たとえば、最初のマーカーは 1、2 番目のマーカーは 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番目のマーカーに番号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

スター付きのピンアイコンを保持し、その横に目立たないラベルを追加できます。このラベルは何でも言うことができますが、私はそれを単に数字に保ちました。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 に答える
1

You can do this in multiple ways. Changing the marker image is one, but requires you to make all those marker images. Another is to use the StyledMarker library which is part of the Google Maps API Utility Library.

于 2012-06-09T13:06:37.953 に答える