Umieszczenie MapLabel na szczycie wielokąta w Google Maps V3

Question

Próbuję postawić MapLabel na szczycie wielokąta w Google Maps V3. Próbowałem ustawić MapLabel zIndex na 2 i Polygon zIndex na 1 bez żadnego szczęścia. Czy nie jest to możliwe, ponieważ wielokąt nie podąża za zIndex?

Utworzyłem jsFiddle dla was sprawdzić: http://jsfiddle.net/7wLWe/1/

Rozwiązanie: W maplabel.js zmiany:

mapPane.appendChild(canvas); 

do:

floatPane.appendChild(canvas); 

Powodem jest fakt, floatPane to przede wszystkim warstwy mapy (okienko 6)

http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView

Answer 1

Wielki aby zobaczyć, że używasz bibliotekę użytkową MapLabel!

Jak już stwierdzono obecnie, MapLabel siedzi w innym oknie mapy. zIndex jest przestrzegany tylko w określonym oknie.

Answer 2

Jeśli nie chcą dotykać maplabel.js, można dodać tę funkcję, aby zmienić z-index rodzica etykiet (choć jeśli masz inne canvas elementów, być może trzeba zmienić funkcję):

//change the z-index of the canvas elements parents to move them above polygon layer 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elements 
var canvasElements = jQuery('canvas'); //jquery for easy cross-browser support 
    for(var i=0; i<canvasElements.length; i++){ 
     canvasElements[i].parentNode.style.zIndex = 9999; 
    } 

}); 

Answer 3

Jest to prawdopodobnie późne znalezisko .. ale mam nadzieję, że ktoś uzna to za przydatne.

Jeśli nie chcesz używać floatPane (Jana Solution), jak to będzie zawsze na wierzchu wszystkiego i chce dać zwyczaj zindex .. Edytuj maplabel.js. Dodaj następujący wiersz tuż przed końcem MapLabel.prototype.onAdd = function() {

if (canvas.parentNode != null) { 
    canvas.parentNode.style.zIndex = style.zIndex; 
} 

Teraz można przejść zIndex podczas tworzenia maplabel:

var mapLabel = new MapLabel({ 
    text: "abc", 
    position: center, 
    map: map, 
    fontSize: 8, 
    align: 'left', 
    zIndex: 15 
}); 

Answer 4

var maplabel = new MapLabel.... 
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex); 

jQuery zrobiło to dla mnie bardzo proste bez zmiany maplabel.js Znalazłem również alternatywne rozwiązanie

$(maplabel.getPanes().mapPane).addClass('map-pane'); 

a następnie definiując z-index w arkuszu stylów

Answer 5

naszkicowałem tę CodePen example wykorzystując klasę gmaps-labels. Bazuje on na skrzypcach w powyższym Q i dodaje klasę o klasie LabelOverlay. Klasa wymaga wymiarów (w jednostkach LatLng) o wielkości pudełka, które znajduje się w pobliżu punktu etykiety (jeśli etykieta spowodowałaby przepełnienie tego pola, ukryłaby je, a niektóre CSS. Jest tam kodeks kodu, sprawdź demo w module CodePen.

var MIN_BOX_H = 0.0346, 
    MIN_BOX_W = 0.121, 
    MAX_BOX_H = 0.001, 
    MAX_BOX_W = 0.03; 



var overlay1 = new LabelOverlay({ 
    ll  : myLatlng, 

    minBoxH  : MIN_BOX_H, 
    minBoxW  : MIN_BOX_W, 

    maxBoxH  : MAX_BOX_H, 
    maxBoxW  : MAX_BOX_W, 

    ... 

    label  : "I want on top", 
    map  : map 
});