Google Maps: Render marker above markerclusterer

Question

Ho una serie di marker che vengono raggruppati sulla mia mappa. Un altro set di marcatori viene visualizzato individualmente e mi capita di aver bisogno che questi vengano visualizzati sopra i cluster. Ho provato a impostare zIndex nell'oggetto opzioni cluster, inferiore a quello del secondo set di marcatori, ma senza successo. Qualche idea su come procedere?

Answer 1

Per quanto ne so, questo non può essere fatto. I cluster risiedono in un riquadro più alto rispetto all'immagine del marcatore.

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

Answer 2

Si può fare, ma è un modo piuttosto irregolare fino ad arrivare lì ... Come dice Rick, il problema è che il MarkerClusterer aggiunge una propria OverlayView con le sue icone di cluster su un vetro maggiore, come i normali indicatori. L'unico modo per aggiungere un marker sopra i cluster è battere il clusterer con le proprie armi e aggiungere un OverlayView e aggiungere il markup dell'icona del marker a un riquadro ancora più alto (leggi i riquadri here). Non mi piace molto - ma è l'unico modo che ho trovato.

Per fare questo è necessario creare una sovrapposizione personalizzata implementando google.maps.OverlayView (reference), un buon esempio può essere trovato here (con spiegazioni, ho usato un po 'di codice da esso).

Ecco un prototipo CustomOverlay approssimativa:

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

Questa sovrapposizione ottiene la mappa, un oggetto LatLng e l'URL di un'icona. La cosa buona è che puoi scrivere il tuo codice HTML sul livello, la cosa brutta è che devi gestire tutto ciò che l'API di Maps fa per te (come la gestione degli ancoraggi dell'immagine del marcatore) da solo. L'esempio funziona bene solo con immagini 32x32px in cui l'ancoraggio si trova nel mezzo dell'immagine, quindi è ancora piuttosto approssimativo.

Per utilizzare il CustomOverlay, proprio un'istanza in questo modo:

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

Spero che questo funziona per voi.

Answer 3

Ho avuto lo stesso problema ma non volevo gestire un nuovo overlay.

Senza dover creare una sovrapposizione specifica, è sufficiente passare i contenitori padre della sovrapposizione z-index.

questo può essere realizzato utilizzando la seguente funzione:

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

Speranza che aiuta.