2010-12-21 64 views
2

Dinevore在地图上使用带有链接的标记。要明白我的意思,看看这个链接,切换地图视图上: http://nyc.dinevore.com/restaurants/discover链接<a>使用Google Maps API V3在标记上叠加

在检查代码,它看起来像他们不使用谷歌地图标记的构造,而是使用原始跨度覆盖与定义的标记作为跨度的背景。这样做允许他们将其标记链接:

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

这种方法的缺点是你失去所有的标记构造的好处如拖放和标记标记阴影效果动画。

是否有可能实现与Dinevore相同的效果,但在顶部使用带有叠加层的Google Maps标记构造函数?

我到目前为止所创建的问题是让链接的Z索引位于包含覆盖的div的z索引之上。

当Google地图渲染时,它首先渲染z-index为100的图块,然后渲染地图上的每个后续项目,例如叠加层,标记,标记阴影,比例滑块,Google徽标,地图源等等。随着这些后续项目中的每一个,Google都会增加Z-索引。

所以我得到

地图

-div

- 的z-index:100 - (一些相关的图块图像)

- 的z-index: 101 - 标签覆盖

-z-index:102 - 标记阴影覆盖

- z索引:103 - 标记图像重叠

- z索引:104 - (空)

- z索引:105 - gmnoprint(我不知道什么这是,但它涉及到标记)

- z索引:106 - (空)

- z索引:107 - 图块图像

-div

- z-index:12 - Google徽标

-div

- 的z-index:1000 - 源

反正让我的跨度标签与101的z-index股利来覆盖它的堆积情况和上面去101或是唯一的解决方案使用javascript hack将101更改为104?例如,通过选择父级并调整z-index?

回答

1

我想出了我做错了什么。当我将代码放在别人博客的代码示例上时,我忽略了我正在渲染标签的“窗格”的详细信息。

我在overlayLayer(窗格1)中渲染标签。相反,我应该已经在overlayImage(Pane 3)中渲染它,然后给它一个比标记本身更大的z-index(z-index:323)。

下面是相关代码:

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

... 

就这样,我的标签在位于overlayImage窗格中呈现,而不是overlayLayer窗格。

要看到每个窗格中发生的事情,看到谷歌地图文档的这一部分:

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

对于如何Z-指数作品的说明,请参阅本:

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

+0

我也有代码'分层'的问题。在某些情况下,我已经能够移动函数调用,并且API分别对元素进行分层。它是一种低技术解决方案,有时候起作用 – roberthuttinger 2013-06-20 16:18:40

相关问题