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」：僅向可見標記添加圓圈

回答

相關問題