2

每个人！

如何利用谷歌地图 MarkerCluster 捕捉 Polygon 而不是 Marker ？

我的程序在谷歌地图上有大约 20,000 个标记，当数据加载到地图中时它变得非常慢。然后我使用 JS 代码绘制一个多边形作为标记的替换。它会跑得更快。也许标记的PNG图像加载会对速度产生负面影响。

最后，我读到了这篇文章

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

'MarkerCluster' 功能很棒。但是，它只能用于 Google Marker 方面。

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 回答