Google 地图 (v3) "MarkerClusterer"：仅将圆添加到可见标记

Question

当使用 Google 地图 v3 的 MarkerClusterer 库时，我试图在 "visible markers only" 周围画一个 "circle"。

库 "clusters"（组）标记可用于提高性能和加载时间。

"MarkerClusterer" 示例：

我不想在每个标记周围画圈，因为这需要很长时间并且会抵消图书馆的好处。

我可以使用下面的 javascript 将圆圈绑定到标记。

我的问题是：如何将圆圈绑定到标记，但仅当 MarkerClusterer 库 "decides" 在地图上绘制单个标记（而不是当它显示集群组时）。

    // Add circle overlay and bind to marker
    var circle = new google.maps.Circle({
        map: map,
        radius: 30.48,    // 150 feet in metres
        fillColor: '#FACC2E',
        strokeColor: '#FACC2E',
        strokeOpacity: 0.75
    });
    circle.bindTo('center', marker, 'position');

Answer 1

除非您将 map-属性设置为 google.maps.Map，否则不会绘制圆。

所以不要设置map-属性并将circle的map-属性绑定到map- marker 的属性改为：

function init() {
  var randLatLng = function() {
      return new google.maps.LatLng(((Math.random() * 17000 - 8500) / 100), ((Math.random() * 36000 - 18000) / 100));
    },
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: {
        lat: 0,
        lng: 0
      }
    }),
    markers = [],
    markerCluster;
  for (var i = 0; i < 100; i++) {
    (function() {
      var marker = new google.maps.Marker({
          position: randLatLng()
        }),
        circle = new google.maps.Circle({

          radius: 30.48,
          fillColor: '#FACC2E',
          strokeColor: '#000000',
          strokeOpacity: 0.75,
          strokeWeight: 20
        });
      circle.bindTo('center', marker, 'position');
      circle.bindTo('map', marker, 'map');
      markers.push(marker);
    })();


  }
  markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'
  });
}

html,
body,
#map {
  margin: 0;
  padding: 0;
  height: 100%;
}

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init" async defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-marker-clusterer/1.0.0/markerclusterer.js"></script>

Answer 2

要保持快速加载时间：

我添加了一个 zoom_changed 事件侦听器，并且仅在放大到超过所需级别时才绘制圆圈（在我的示例中，基于我的圆圈的小半径大小，缩放级别为 15）。

然后我在当前视口中寻找标记并将圆形对象绑定到每个标记而不是整个数据集。

// Draw circles when zoomed in close enough - only on markers in viewport.
map.addListener('zoom_changed', function() {

    if (map.getZoom() > 15){

        for (var i=0; i<markers.length; i++){
                if( map.getBounds().contains(markers[i].getPosition()) ){

                    circle = new google.maps.Circle({
                        map: map,
                        radius: 30.48,    // 150 feet in metres
                        fillColor: '#FACC2E',
                        fillOpacity: 0.15,
                        strokeColor: '#FACC2E',
                        strokeOpacity: 0.75
                    });
                    circle.bindTo('center', markers[i], 'position');
                    circle.bindTo('map', markers[i], 'map');
                }
        }
    }
});

Google 地图 (v3) "MarkerClusterer"：仅将圆添加到可见标记

Google Maps (v3) "MarkerClusterer": Add Circle to visible markers only

javascript

google-maps-api-3

markerclusterer