Размещение MapLabel поверх многоугольника в Google Maps V3

Я пытаюсь разместить MapLabel поверх многоугольника в Google Maps V3. Я попытался установить MapLabel zIndex на 2, а Polygon zIndex - на 1 без везения. Разве это невозможно, поскольку Polygon действительно не следует за zIndex?

Я создал jsFiddle для вас, ребята, чтобы проверить: http://jsfiddle.net/7wLWe/1/

Решение: В maplabel.js изменить:

mapPane.appendChild(canvas);

floatPane.appendChild(canvas);

Причина в том, что floatPane - это выше всех слоев карты (панель 6)

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

Ответ 1

Это, вероятно, поздняя находка... но надеюсь, что кто-то найдет это полезным.

Если вы не хотите использовать floatPane (John Solution), так как это всегда будет поверх всего, и вы хотите дать настраиваемый zIndex. Отредактируйте maplabel.js. Добавьте следующую строку до конца MapLabel.prototype.onAdd = function() {

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

Теперь вы можете передать zIndex при создании maplabel:

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

Ответ 2

Если вы не хотите прикасаться к maplabel.js, вы можете добавить эту функцию, чтобы изменить z-index родителя меток (хотя, если у вас есть другие элементы canvas, вам может потребоваться изменить функцию ):

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

});

Ответ 3

Замечательно, что вы используете библиотеку MapLabel!

Как вы узнали, MapLabel находится на другой карте. zIndex соблюдается только на определенной панели.

Ответ 4

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

jQuery сделал это довольно простым для меня, не меняя maplabel.js Я также нашел альтернативное решение

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

а затем определение z-индекса в таблице стилей

Ответ 5

Я набросал этот пример CodePen, используя gmaps-labels. Он основан на скрипке в Q выше и добавляет ose класса LabelOverlay. Класс требует new google.maps.LatLng, размеры (в единицах LatLng) прямоугольника, расположенного вокруг метки (если метка переполнила бы это поле, спрячьте его и немного CSS). Здесь будет заглушка кода, проверьте демонстрацию в 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
});