在Google Maps V3中將MapLabel放置在多邊形頂部

我試圖在Google Maps V3中放置多邊形頂部的MapLabel。我試圖將MapLabel zIndex設置爲2，將Polygon zIndex設置爲1，但沒有任何運氣。這是不是可能的，因爲多邊形並不真正遵循zIndex？在Google Maps V3中將MapLabel放置在多邊形頂部

我已經創建了一個對的jsfiddle你們來看看：http://jsfiddle.net/7wLWe/1/

解決方案：在maplabel.js變化：

mapPane.appendChild(canvas);

到：

floatPane.appendChild(canvas);

的原因是因爲floatPane高於所有地圖圖層（窗格6）

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

來源

2012-02-07 John

你應該張貼您的解決方案作爲一個答案，並接受它，去幫助別人，將來 – duncan 2012-02-08 10:08:23

+1， - 尼斯找到人 – RocketDonkey 2012-11-14 09:50:43

更改爲markerLayer而不是floatPane如果你使用拖動或編輯。 – hammurabi 2016-09-26 15:03:17

很高興看到您使用MapLabel實用程序庫！

正如您發現的那樣，MapLabel位於不同的地圖窗格中。 zIndex僅在某個窗格中受到尊重。

來源

2012-02-08 14:15:08

如果你不想碰maplabel.js，您可以添加此功能更改標籤的父的z-index（但如果你有其他canvas元素，你可能需要改變功能）：

//change the z-index of the canvas elements parents to move them above polygon layer 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elements 
var canvasElements = jQuery('canvas'); //jquery for easy cross-browser support 
    for(var i=0; i<canvasElements.length; i++){ 
     canvasElements[i].parentNode.style.zIndex = 9999; 
    } 

});

來源

2013-09-25 16:16:45 brouxhaha

我無法得到這個工作。父節點樣式索引更改在檢查器中正確顯示，但標籤保持隱藏狀態。 – 2014-01-26 13:49:26

這可能是一個遲到的發現..但希望有人會覺得這有用。

如果你不想使用floatPane（John的解決方案），因爲這將是永遠的一切之上，想給一個自定義的zIndex的..編輯maplabel.js。只是MapLabel.prototype.onAdd =函數（）{

if (canvas.parentNode != null) { 
    canvas.parentNode.style.zIndex = style.zIndex; 
}

現在結束前添加以下行可以通過zIndex在創建maplabel：

var mapLabel = new MapLabel({ 
    text: "abc", 
    position: center, 
    map: map, 
    fontSize: 8, 
    align: 'left', 
    zIndex: 15 
});

來源

2014-01-28 07:08:31 Avishek

jQuery對我來說非常簡單，沒有改變maplabel.js 我還發現了一個替代解決方案

$(maplabel.getPanes().mapPane).addClass('map-pane');

，然後在樣式表

來源

2015-09-17 23:58:06 Wanfactory

限定的z索引I勾勒了本CodePen example利用gmaps-labels類。它是基於上面Q中的小提琴，並增加了一個LabelOverlay類的ose。這個類需要一個new google.maps.LatLng，一個圍繞標籤點的盒子尺寸（以LatLng爲單位）（如果標籤會溢出這個盒子，隱藏它，還有一些CSS。這裏有一個代碼存根，請查看CodePen中的演示。

var MIN_BOX_H = 0.0346, 
    MIN_BOX_W = 0.121, 
    MAX_BOX_H = 0.001, 
    MAX_BOX_W = 0.03; 



var overlay1 = new LabelOverlay({ 
    ll  : myLatlng, 

    minBoxH  : MIN_BOX_H, 
    minBoxW  : MIN_BOX_W, 

    maxBoxH  : MAX_BOX_H, 
    maxBoxW  : MAX_BOX_W, 

    ... 

    label  : "I want on top", 
    map  : map 
});

來源

2016-03-31 20:51:17

在Google Maps V3中將MapLabel放置在多邊形頂部

回答

相關問題