Google地图（v3）“MarkerClusterer”：仅向可见标记添加圆圈

我试图在Google地图v3中使用MarkerClusterer库时，在“仅限可见标记”周围绘制“圆圈”。Google地图（v3）“MarkerClusterer”：仅向可见标记添加圆圈

库可以用来提高性能和加载时间的“簇”（组）标记。

“MarkerClusterer”例如：

我不想画逛了一圈每一个标志，因为它需要长期和否定库的好处。

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

我的问题是：如何将圆结合标记物，但只有当MarkerClusterer库“决定”，以在地图上绘制一个个别标记（而不是当它显示群集组代替）。除非你设置map -property到google.maps.Map

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

来源

2016-06-13 dabra904

一个圆圈将无法绘制。

所以不要设置map - 属性和绑定的circle的map -property到-property 而不是map：

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>

来源

2016-06-14 00:35:31

感谢您的回复和时间。对于每个标记位置，这个答案似乎是“绘制”圆圈（不仅仅是“可见”标记），而是基于大约12,000个标记的数据集上的运行时间。如果我启用该圆圈，则需要比圆圈不属于JavaScript代码更长的时间。 – dabra904

然后侦听标记的'map_changed'事件。当map-property更改为null时，请删除该圆（如果有），否则绘制一个圆 –

保持较高速度的加载时间：

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

来源

2016-06-15 21:06:06 dabra904

Google地图（v3）“MarkerClusterer”：仅向可见标记添加圆圈

回答

相关问题