javascript - 使用 Google Maps API V3 在标记上链接 <a> 叠加层

Question

Dinevore 在他们的 map 上使用带有链接的标记。要了解我的意思，请查看此链接并打开 map View : http://nyc.dinevore.com/restaurants/discover

检查代码后，他们似乎没有使用 Google map 标记构造函数，而是使用原始跨度叠加层，并将标记定义为跨度的背景。这样做允许他们在他们的标记中放置一个链接:

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

这种方法的缺点是您失去了标记构造函数的所有好处，例如拖放和标记动画上的标记阴影效果。

是否有可能实现与 Dinevore 相同的效果，但使用顶部覆盖的 Google map 标记构造函数？

到目前为止，我所创建的内容所遇到的问题是让链接的 Z-index 位于包含叠加层的 div 的 z-index 之上。

当 Google map 渲染时，它首先渲染 z-index 为 100 的图 block ，然后渲染 map 上的每个后续项目，例如叠加层、标记、标记阴影、比例 slider 、Google Logo 、 map 源、等等。对于这些后续项目中的每一项，Google 都会增加 Z-index。

所以我明白了

map

-分区

-- z-index: 100 --(与 map 瓦片图像相关的东西)

-- z-index: 101 -- 标签叠加

-- z-index: 102 -- 标记阴影叠加

-- z-index: 103 -- 标记图像叠加

-- z-index: 104 -- (空)

-- z-index: 105 -- gmnoprint (我不知道这是什么，但它与标记有关)

-- z-index: 106 -- (空)

-- z-index: 107 -- map 瓦片图片

-分区

-- z-index: 12 -- 谷歌标志

-分区

-- z-index: 1000 -- 来源

无论如何，是否可以在 div 中获取我的 span 标签，z-index 为 101 以覆盖它的堆叠上下文并超过 101，或者是使用 javascript hack 将 101 更改为 104 的唯一解决方案？比如选择parent，调整z-index？

Answer 1

我发现我做错了什么。当我的代码基于某人博客中的一些代码示例时，我忽略了我在其中呈现标签的“ Pane ”的细节。

我在 overlayLayer( Pane 1)中渲染标签。相反，我应该在 overlayImage( Pane 3)中渲染它，然后给它一个大于标记本身的 z-index(z-index:323)。

相关代码如下:

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

...

这样，我的标签就呈现在 overlayImage Pane 中，而不是 overlayLayer Pane 中。

要查看每个 Pane 中的内容，请参阅 Google map 文档的这一部分:

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

有关 Z-index 工作原理的解释，请参见:

http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex