Google Maps: İşaretleyici üzerinde işaretleyici işaretçisi

Question

Haritamda kümelenen bir takım işaretleyicilerim var. Başka bir işaret kümesi ayrı ayrı görüntülenir ve bunların kümelerin üzerinde görüntülenmesini istiyorum. Kümeler seçenekler nesnesinde zIndex'i ayarlamayı denedim, ikinci işaretçi kümesinden daha düşük, ancak boşuna. Bunun hakkında nasıl bir fikrin var?

Answer 1

Bildiğim kadarıyla bu yapılamaz. Kümeler, marker görüntüsünden daha yüksek bölmede bulunur.

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

Answer 2

Yapılabilir, ama oraya gelene kadar bu oldukça engebeli bir yoldur ... Rick söylediği gibi sorun MarkerClusterer daha yüksek bir bölmede olarak üzerindeki küme simgeleri ile bir kendi Paylaşımlı ekler olmasıdır düzenli işaretçiler. Kümelerin üstüne bir işaretçi eklemenin tek yolu, kümeleyiciyi kendi silahlarıyla dövmek ve kendi OverlayView'ını eklemek ve daha yüksek bir bölüme işaretçi simgesi işaretlemesini eklemek (bölmelerle ilgili olarak here bölmelerini okuyun). Gerçekten sevmiyorum - ama bulduğum tek yol bu.

Eğer google.maps.OverlayView ( reference) uygulayan özel bir bindirme oluşturmak zorunda Bunu yapmak için iyi bir örnek here bulunabilir (açıklamalarla birlikte, ondan kod biraz kullanılır).

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

Bu bindirme harita, EnlBoy nesne ve bir simge URL'sini alır:

İşte kaba CustomOverlay prototipidir. İyi olan şey, kendi HTML'nizi katmana yazabilmenizdir. Kötü olan şey, Haritalar API'sinin sizin için yaptığı tüm şeyleri (marker image anchor handling) kendi başınıza halletmenizdir. Örnek sadece, bağlantı noktasının görüntünün ortasında olduğu 32x32 piksel görüntüler ile işe yarıyor, bu yüzden hala oldukça kaba.

sadece bunu böyle örneğini, CustomOverlay kullanmak için:

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

Bunun sizin için işe yarar.

Answer 3

Aynı sorunu yaşadım, ancak yeni bir yer paylaşımını ele almak istemedim.

Belirli bir Bindirme oluşturmak zorunda kalmadan, bindirmenin üst kapsayıcılarını z-dizinlerini değiştirebilirsiniz.

Bu

aşağıdaki işlevi kullanılarak elde edilebilir:

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

yardımcı olur Umut.