Question

大家好！

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

我的程序在Google地图上有大约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**)

将多边形置于此群集机制中是否有一些解决方案？

非常感谢任何帮助！

Answer 1

我试探性地举了一个例子。

<!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>

enter image description here

如何利用谷歌地图MarkerCluster来捕捉多边形而不是标记？

1 个答案: