2

みんな！

マーカーではなくポリゴンをキャッチするためにグーグルマップMarkerClusterを利用する方法は？

私のプログラムのGoogleマップには約20,000個のマーカーがあり、データがマップに読み込まれると非常に遅くなります。次に、JSコードを使用して、マーカーの代わりに1つのポリゴンを描画します。それはより速く走るでしょう。マーカーのPNG画像の読み込みは、速度に悪影響を与える可能性があります。

最後に、この記事を読みました

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

関数「MarkerCluster」は素晴らしいです。ただし、Googleマーカーの側面でのみ使用できます。

var markerClusterer = new MarkerClusterer(map, **markerArray**)

では、このクラスターメカニズムにポリゴンを配置するための解決策はありますか？

どんな助けでも大歓迎です！

4

1 に答える 1

10

とりあえず例を挙げました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
    <style>
      html, body, #map_canvas {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

    <script type='text/javascript'>
      var mapCanvas;

      function initalize() {

        // Creating a map
        var mapDiv = document.getElementById("map_canvas");
        mapCanvas = new google.maps.Map(mapDiv, {
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });

        // Generate bunch of path data
        var sw = new google.maps.LatLng(-19.448292, -152.012329);
        var ne = new google.maps.LatLng(76.150236, 58.925171);
        var bounds = new google.maps.LatLngBounds(sw, ne);
        mapCanvas.setCenter(bounds.getCenter());
        mapCanvas.setZoom(3);

        var baseLat, baseLng, category, json = [], path;
        for (var i = 0; i < 100; i++) {
          baseLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
          baseLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();

          path = [
            new google.maps.LatLng(baseLat, baseLng),
            new google.maps.LatLng(baseLat + 1, baseLng + 1),
            new google.maps.LatLng(baseLat, baseLng + 2)
          ];
          json.push(path);
        }

        var bounds, polyList = [];
        for (var i = 0, length = json.length; i < length; i++) {
          var polyline = createPolygon(json[i]);
          polyList.push(polyline);
        }
        var clusterer = new MarkerClusterer(mapCanvas, polyList);
      }

      function createPolygon(path) {
        var polygon = new google.maps.Polygon({
          path : path,
          strokeOpacity : 1,
          strokeColor : "red"
        });

        var lastPath = null,
            lastCenter = null;
        polygon.getPosition = function() {
          var path = this.getPath();
          if (lastPath == path) {
            return lastCenter;
          }
          lastPath = path;
          var bounds = new google.maps.LatLngBounds();
          path.forEach(function(latlng, i) {
            bounds.extend(latlng);
          });

          lastCenter = bounds.getCenter()
          return lastCenter;
        };
        return polygon;
      }


      google.maps.event.addDomListener(window, "load", initalize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

ここに画像の説明を入力してください

于 2012-11-28T09:19:57.790 に答える