Google Maps: renderuj znacznik powyżej markclusterer

Question

Mam zestaw znaczników, które zgrupują się na mojej mapie. Kolejny zestaw znaczników jest wyświetlany osobno, a ja muszę je wyświetlać powyżej klastrów. Próbowałem ustawić zIndex w obiekcie opcji klastrów, niższy niż w drugim zestawie znaczników, ale bez skutku. Każdy pomysł, jak to zrobić?

Answer 1

O ile mi wiadomo, nie można tego zrobić. Klastry znajdują się w wyższym okienku niż obraz znacznika.

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

Answer 2

To można zrobić, ale jest to dość wyboista droga, aż się tam dostać ... Jak mówi Rick, problemem jest to, że MarkerClusterer dodaje własną wyświetlanie nakładki z jego klastra ikon na wyższym okienku jako regularne znaczniki. Jedynym sposobem na dodanie znacznika nad gromadami jest pokonanie klastrów własnymi broniami i dodanie własnego OverlayView oraz dodanie znacznika ikony znacznika do jeszcze wyższego panelu (przeczytaj o panelach here). Nie podoba mi się to - ale to jedyny sposób, jaki znalazłem.

W tym celu trzeba utworzyć niestandardowe nakładki wykonawczych google.maps.OverlayView (reference) zrobić, to dobry przykład można znaleźć here (z wyjaśnieniami, użyłem trochę kodu z nim).

Tutaj jest szorstka prototyp CustomOverlay:

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

Ta nakładka dostaje mapy, długość i szerokość geograficzną przedmiotu oraz adres URL ikony. Dobrą rzeczą jest to, że możesz napisać własny HTML do warstwy, ale najgorsze jest to, że musisz sam sobie poradzić z wszystkimi rzeczami, które robi dla Ciebie interfejs API Map (np. Obsługa znaczników obrazu znacznika). Przykład działa dobrze tylko przy obrazach 32x32px, w których kotwica znajduje się pośrodku obrazu, więc nadal jest dość szorstka.

Aby użyć CustomOverlay, po prostu oznacz ją tak:

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

Mam nadzieję, że to działa dla Ciebie.

Answer 3

Miałem ten sam problem, ale nie chciałem obsłużyć nowej nakładki.

Bez konieczności tworzenia określonej nakładki, można po prostu przełączyć nadrzędne kontenery nakładki z-indexes.

ten może zostać osiągnięty za pomocą następujących funkcji:

_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; 
    } 
}; 

Nadzieję, że to pomaga.