谷歌地图（v3）“MarkerClusterer”：仅将圆圈添加到可见标记

Question

在为 Google Maps v3 使用 MarkerClusterer 库时，我试图在“仅可见标记”周围画一个“圆圈”。

可用于提高性能和加载时间的库“集群”（组）标记。

“MarkerClusterer”示例：

我不想在每个标记周围画一个圆圈，因为它需要很长时间并且否定了库的好处。

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

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

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

保持快速加载时间：

我添加了一个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');
                }
        }
    }
});

Answer 2

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

所以不要设置map-property，而是将circle的map-property绑定到marker的map-property：

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>