Ссылка <a>наложение на маркер с Google Maps API V3

Question

Dinevore использует маркеры со ссылками на своих картах.Чтобы понять, что я имею в виду, перейдите по этой ссылке и включите вид карты: http://nyc.dinevore.com/restaurants/discover

После проверки кода кажется, что они не используют конструктор маркеров Google Maps, а вместо этого используют необработанное наложение диапазона смаркер, определенный как фон пролета.Это позволяет им поместить ссылку в свой маркер:

<span class="marker">
  <a onclick="infoBoxPop[1].open(map)" style="color: white; cursor: pointer;">1</a>
</span>

Недостаток этого подхода заключается в том, что вы теряете все преимущества конструктора маркера, такие как эффект тени маркера на drag'n'drop.и анимация маркеров.

Можно ли добиться того же эффекта, что и у Dinevore, но с помощью конструктора маркеров Google Maps с наложением сверху?

Проблема, с которой я сталкиваюсь, 'До сих пор созданный объект получает Z-индекс ссылки, размещаемой над z-индексом элемента div, содержащего наложение.

Когда карта Google рендерится, сначала она отображает плитки с z-индексом 100, затем визуализирует каждый последующий элемент на карте, такой как наложения, маркеры, тени от маркеров, ползунок масштаба, логотип Google, картаисточник и т. д. С каждым из этих последующих элементов Google увеличивает Z-индекс.

Итак, я получаю

Карта

-div

- z-index: 100 - (что-то связанное с изображениями фрагментов карты)

- z-индекс: 101 - наложение метки

- z-индекс: 102 - наложение тени маркера

- z-индекс: 103 - изображение маркераоверлей

- z-индекс: 104 - (пусто)

- z-индекс: 105 - gmnoprint (я не знаю, что это такое, но это связано смаркер)

- z-index: 106 - (пусто)

- z-index: 107 - карта мозаичных изображений

-div

- z-index: 12 - логотип Google

-div

- z-index: 1000 - источник

Есть ли в любом случае получить мойметка span в div с z-index 101 для переопределения контекста стека и превышения 101, или это единственное решение использовать взлом javascript для изменения 101 на 104?Например, выбрав родителя и настроив z-index?

Answer 1

Я понял, что я делаю неправильно. Поскольку я основывал свой код на каком-то примере кода из чьего-то блога, я упустил из виду детали «панели», на которой я рендерил метку.

Я рендерил метку в оверлейном слое (панель 1). Вместо этого я должен был отобразить его в overlayImage (панель 3), а затем присвоить ему z-индекс, превышающий индекс самого маркера (z-index: 323).

Вот соответствующий код:

Label.prototype.onAdd = function() {
  var pane = this.getPanes().overlayImage;
  pane.appendChild(this.div_);

...

При этом моя метка отображается на панели overlayImage, а не на панели overlayLayer.

Чтобы увидеть, что происходит на каждой панели, см. Эту часть документации Google Maps:

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

Для объяснения того, как работает Z-индекс, смотрите это:

http://css -discuss.incutio.com / вики / Overlapping_And_ZIndex