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

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

16 голосов
/ 08 февраля 2012

Я пытаюсь поместить MapLabel поверх полигона в Google Maps V3. Я попытался установить MapLabel zIndex в 2 и Polygon zIndex в 1 без какой-либо удачи. Разве это не возможно, так как Полигон действительно не следует 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

Ответы [ 5 ]

12 голосов
/ 28 января 2014

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

Если вы не хотите использовать floatPane (решение Джона), так как он всегда будет на вершине всего, и хотите дать собственный 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
});
5 голосов
/ 25 сентября 2013

Если вы не хотите прикасаться к 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;
    }

});
0 голосов
/ 31 марта 2016

Я набросал этот пример CodePen , используя класс gmaps-label .Он основан на скрипке в Q выше и добавляет ose класса LabelOverlay.Класс требует new google.maps.LatLng размеров (в единицах LatLng) прямоугольника, центрированного вокруг точки метки (если метка будет переполнять этот прямоугольник, спрячьте ее и немного CSS. Вот заглушка кода, посмотрите демонстрацию вCodePen.

enter image description here

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
});
0 голосов
/ 18 сентября 2015 
var maplabel = new MapLabel....  
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex);

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

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

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

0 голосов
/ 08 февраля 2012

Приятно видеть, что вы используете служебную библиотеку MapLabel!

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

...