Question

在Google地图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

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

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

＆＃13;

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'
  });
}

＆＃13;

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

＆＃13;

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

＆＃13;

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”：仅将圆圈添加到可见标记

2 个答案: