Google지도 (v3) "MarkerClusterer": 표시 마커에만 동그라미 추가

Question

Google지도 v3에 MarkerClusterer 라이브러리를 사용할 때 '표시 마커 만'주위에 '원'을 그려야합니다.

라이브러리는 성능 및로드 시간을 향상시키는 데 사용할 수있는 "클러스터"(그룹) 마커입니다.

"MarkerClusterer"예 : 그것은 긴에 소요 라이브러리의 장점을 부정 나는 주위에 원 모든 마커를 그릴 싶지 않아

.

아래의 자바 스크립트로 마커에 서클을 바인딩 할 수 있습니다.

내 질문이입니다 : 마커로 원을 결합하기 만 MarkerClusterer 라이브러리 "결정"경우에만 (가 클러스터 그룹을 대신 표시 할 때와 반대)지도에 개별 마커를 그리는 방법. 당신이 google.maps.Map에 map -property을 설정하지 않는 한

// 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 -property을 설정하고 map -property 대신 marker의에 circle의 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>

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