2010-12-21 25 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