Наложение z-Index в Google Maps версии 3

Question

Я пытаюсь получить наложение в google maps api v3, чтобы оно отображалось над всеми маркерами. Но похоже, что Google API всегда ставит мой оверлей с самым низким приоритетом z-index. Единственное решение, которое я нашел, - это пройтись по дереву DOM и вручную установить z-index на более высокое значение. Плохое решение.

Я добавляю свой новый div в оверлей с:

 onclick : function (e) {
     var index = $(e.target).index(),
         lngLatXYposition = $.view.overlay.getProjection().fromLatLngToDivPixel(this.getPosition());
         icon = this.getIcon(),
         x = lngLatXYposition.x - icon.anchor.x,
         y = lngLatXYposition.y - icon.anchor.y

     $('<div>test</div>').css({ left: x, position: 'absolute', top: y + 'px', zIndex: 1000 }).appendTo('.overlay');
}

Я перепробовал все свойства, которые мог придумать при создании наложения. zIndex, zPriority и т. д.

Я добавляю свой оверлей с:

$.view.overlay = new GmapOverlay( { map: view.map.gmap });

И GmapOverlay наследует от нового google.maps.OverlayView.

Есть идеи?

.. Фредрик

Answer 1

Вы не можете изменить zIndex для OverlayView (у него нет такого свойства), но он содержит панели, которые содержат узлы DOM. Здесь вы можете использовать свойство z-index;

...
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001;
...

Answer 2

Если у кого-то была такая же проблема, как у меня, вот моя проблема и решение:

Мне нужен был OverlayView, который бы добавлял подсказки к маркерам, но мое всплывающее наложение продолжало показывать позади маркеров.

Я реализовал подкласс OverlayView в соответствии с документацией Google: https://developers.google.com/maps/documentation/javascript/customoverlays

Когда вы пишете свою пользовательскую функцию OverlayView.prototype.onAdd, вам необходимо указать, к какой панели прикрепить ваше наложение. Я просто скопировал код, фактически не читая объяснения.

В своем коде они прикрепляют оверлей к панели overlayLayer:

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);

Но есть много разных MapPanes, которые вы можете использовать:

"Набор панелей типа MapPanes определяет порядок наложения для различных слоев на карта. Возможны следующие панели, и они перечислены в порядке их расположения снизу вверх: "

• MapPanes.mapPane (Уровень 0)
• MapPanes.overlayLayer (Уровень 1)
• MapPanes.markerLayer (Уровень 2)
• MapPanes.overlayMouseTarget (Уровень 3)
• MapPanes.floatPane (Уровень 4)

Я хотел, чтобы наложение накладывалось на всю другую информацию на карте, поэтому я использовал панель floatPane и проблема была решена.

Итак, вместо:

this.getPanes().overlayLayer.appendChild(div)

вы используете это:

this.getPanes().floatPane.appendChild(div);

Answer 3

Чтобы иметь возможность поиграть с paneType класса mapLabel, я добавил свойство paneType в класс MapLabel из служебной библиотеки Google (https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303).

Это полезно, чтобы ярлык не скрывался ломаной линией.

Найдите код дополнения к файлу mapLabel.js.

MapLabel.prototype.onAdd = function() {
  var canvas = this.canvas_ = document.createElement('canvas');
  var style = canvas.style;
  style.position = 'absolute';

  var ctx = canvas.getContext('2d');
  ctx.lineJoin = 'round';
  ctx.textBaseline = 'top';

  this.drawCanvas_();

  var panes = this.getPanes();
  if (panes) {
    // OLD: panes.mapPane.appendChild(canvas)
    var paneType = this.get('paneType');
    panes[paneType].appendChild(canvas);
  }
};

MapLabel = function (opt_options) {
  this.set('fontFamily', 'sans-serif');
  this.set('fontSize', 12);
  this.set('fontColor', '#000000');
  this.set('strokeWeight', 4);
  this.set('strokeColor', '#ffffff');
  this.set('align', 'center');

  this.set('zIndex', 1e3);
  this.set('paneType', 'floatPane');

  this.setValues(opt_options);
}

Пример кода с использованием paneType:

    var mapLabel = new MapLabel({
      text: segDoc.curr_value.toFixed(0),
      position: new google.maps.LatLng(lblLat, lblLng),
      map: map.instance,
      fontSize: 12,
      align: 'center',
      zIndex: 10000,
      paneType: 'floatPane',
    });

Спасибо!

Answer 4

Отказ от ответственности: это хитрое решение, которое может перестать работать в любое время, и вы определенно не должны использовать его в производстве.

Для тех, кто ищет быстрое и грязное решение, этот CSS работал для меня:

.gm-style > div:first-child > div:first-child > div:nth-child(4) {
  z-index: 99 !important;
}

Используйте на свой страх и риск!

Answer 5

Использовать panes.overlayMouseTarget.appendChild

Если вы хотите, чтобы ваш слой можно было ориентировать с помощью щелчков мыши (и использовать такие события, как "click" или CSS pseudo :: hover), то вы должны добавить наложение на карту, используя overlayMouseTarget

var panes = this.getPanes ();

panes.overlayMouseTarget.appendChild (this.div _);

Также см .: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes

Answer 6

Установка z-index на 104 для слоя overLay представляется «магическим» числом, если вы хотите взаимодействовать с маркерами (т. Е. Перетаскивать маркеры). Любое значение выше 104 и вы не можете взаимодействовать с маркерами. если есть менее хрупкое решение ...