Оверлей z-Index в google-картах версии 3

Я пытаюсь получить оверлей в google-картах api v3, чтобы появиться над всеми маркерами. Но похоже, что google api всегда ставит мой оверлей с наименьшим приоритетом z-индекса. Единственное решение, которое я нашел, - это повторить попытку через дерево 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.

Любые идеи?

.. Фредрик

Ответы

Ответ 1

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

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

Ответ 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);

Ответ 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',
    });

Спасибо!

Ответ 4

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

Ответ 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

Ответ 6

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

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

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

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