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

【问题标题】：How to utilize google map MarkerCluster to catch Polygon rather than marker ?如何利用谷歌地图 MarkerCluster 捕捉多边形而不是标记？
【发布时间】：2012-11-16 01:05:01
【问题描述】：

大家！

如何利用 google map 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**)

那么有没有一些解决方案可以将多边形放入这个集群机制？

任何帮助将不胜感激！

【问题讨论】：

标签： google-maps-api-3

【解决方案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>

【讨论】：

非常感谢！我已经阅读了类'markerclusterer'的源'JS代码'，发现标记和集群之间的重要关系是'POSITION'，'google.maps.LatLng（lat，lng）'的对象。是的，这些代码中的句子 'marker.getPosition' 是 KEY。因此，您的代码为多边形对象提供了函数“getPosition”，它将返回 LatLng。结果，它通过提供此功能创建了一个标记的替代品，非常聪明！ :) 谢谢！
非常感谢，有用的解决方案。