Google지도 : markerclusterer 위의 마커 렌더링

Question

지도에 클러스터 된 마커 세트가 있습니다. 다른 마커 집합이 개별적으로 표시되며 클러스터 위에 표시해야합니다. 클러스터 옵션 객체에서 zIndex를 설정하려고했지만 두 번째 세트의 마커보다 낮지 만 아무 소용이 없습니다. 이것에 대해 어떻게 생각하세요?

Answer 1

내가 아는 한이 일은 할 수 없습니다. 클러스터는 마커 이미지보다 높은 창에 있습니다.

https://developers.google.com/maps/documentation/javascript/reference#MapPanes

Answer 2

그것은 수행 할 수 있습니다,하지만 당신은 거기까지 꽤 울퉁불퉁 방법 ... 릭이 말했듯이, 문제는 MarkerClusterer이 높은 창으로에 미치는 클러스터 아이콘과 함께 자신의 있도록 OverlayView를 추가하는 것입니다 정규 마커. 클러스터 위에 마커를 추가하는 유일한 방법은 자체 무기로 클러스터러를 물리 치고 고유 한 OverlayView를 추가하고 더 높은 창에 마커 아이콘 마크 업을 추가하는 것입니다 (팬 here에 대해 읽음). 나는 그것을 정말로 좋아하지 않는다. 그러나 그것이 내가 발견했던 유일한 길이다.

이렇게하려면 google.maps.OverlayView (reference)를 구현하는 맞춤 오버레이를 만들어야합니다. 좋은 예는 here입니다 (설명과 함께 약간의 코드를 사용함).

// build custom overlay class which implements google.maps.OverlayView 
function CustomOverlay(map, latlon, icon, title) { 
    this.latlon_ = latlon; 
    this.icon_ = icon; 
    this.title_ = title; 
    this.markerLayer = jQuery('<div />').addClass('overlay'); 
    this.setMap(map); 
}; 
CustomOverlay.prototype = new google.maps.OverlayView; 
CustomOverlay.prototype.onAdd = function() { 
    var $pane = jQuery(this.getPanes().floatPane); // Pane 6, one higher than the marker clusterer 
    $pane.append(this.markerLayer); 
}; 
CustomOverlay.prototype.onRemove = function(){ 
    this.markerLayer.remove(); 
}; 
CustomOverlay.prototype.draw = function() { 
    var projection = this.getProjection(); 
    var fragment = document.createDocumentFragment(); 

    this.markerLayer.empty(); // Empty any previous rendered markers 

    var location = projection.fromLatLngToDivPixel(this.latlon_); 
    var $point = jQuery('<div class="map-point" title="'+this.title_+'" style="' 
          +'width:32px; height:32px; ' 
          +'left:'+location.x+'px; top:'+location.y+'px; ' 
          +'position:absolute; cursor:pointer; ' 
         +'">' 
         +'<img src="'+this.icon_+'" style="position: absolute; top: -16px; left: -16px" />' 
        +'</div>'); 

    fragment.appendChild($point.get(0)); 
    this.markerLayer.append(fragment); 
}; 

이 오버레이지도, 위도 경도 객체와 아이콘의 URL을 가져옵니다

여기에 거친 CustomOverlay 프로토 타입입니다. 좋은 점은 자신 만의 HTML을 레이어에 작성할 수 있다는 점입니다. 나쁜 점은지도 API가 제공하는 모든 물건 (마커 이미지 앵커 처리와 같은)을 직접 처리해야한다는 것입니다. 이 예제는 앵커가 이미지 중간에있는 32x32 픽셀 이미지에서만 잘 작동하므로 여전히 매우 까다 롭습니다.

는 다음과 같이 인스턴스화의 CustomOverlay를 사용하려면

// your map center/marker LatLng 
var myLatlng = new google.maps.LatLng(24.247471, 89.920990); 

// instantiate map 
var map = new google.maps.Map(
    document.getElementById("map-canvas"), 
    {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} 
); 

// create the clusterer, but of course with markers 
//var markerClusterer = new MarkerClusterer(map, []); 

// add custom overlay to map 
var customCustomOverlay = new CustomOverlay(map, myLatlng, 'http://www.foo.bar/icon.png'); 

나는이 당신을 위해 작동 바랍니다.

Answer 3

동일한 문제가 있었지만 새 오버레이를 처리하고 싶지 않았습니다.

특정 오버레이를 만들지 않고도 오버레이의 상위 컨테이너 z- 색인을 전환 할 수 있습니다.

이

는 다음과 같은 기능을 사용하여 달성 할 수 있습니다

_changeOverlayOrder = function(map) { 
    var panes = map.getPanes(); 
    var markerOverlayDiv = panes.overlayImage.parentNode; 
    var clusterOverlayDiv = panes.overlayMouseTarget.parentNode; 
    // Make the clusters clickable. 
    if(!markerOverlayDiv.style.pointerEvents) { 
     markerOverlayDiv.style.cssText += ";pointer-events: none;"; 
    } 
    // Switch z-indexes 
    if(markerOverlayDiv.style.zIndex < clusterOverlayDiv.style.zIndex) { 
     var tmp = markerOverlayDiv.style.zIndex; 
     markerOverlayDiv.style.zIndex = clusterOverlayDiv.style.zIndex; 
     clusterOverlayDiv.style.zIndex = tmp; 
    } 
}; 

는 도움이되기를 바랍니다.