javascript 在 Google Maps V3 中的多边形顶部放置 MapLabel
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9185251/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing a MapLabel on top of a Polygon in Google Maps V3
提问by John
I'm trying to place a MapLabel on top of a Polygon in Google Maps V3. I've tried to set the MapLabel zIndex to 2 and the Polygon zIndex to 1 without any luck. Isn't this possible since the Polygon doesn't really follow zIndex?
我正在尝试将 MapLabel 放在 Google Maps V3 中的多边形顶部。我试图将 MapLabel zIndex 设置为 2，将 Polygon zIndex 设置为 1，但没有任何运气。这不是可能的，因为多边形并不真正遵循 zIndex？
I've created a jsFiddle for you guys to check out: http://jsfiddle.net/7wLWe/1/
我已经创建了一个 jsFiddle 供你们查看：http: //jsfiddle.net/7wLWe/1/
Solution:In maplabel.jschange:
解决方案：在maplabel.js变化：
mapPane.appendChild(canvas);
to:
到：
floatPane.appendChild(canvas);
The reason is because floatPaneis above all map layers (pane 6)
原因是因为首先floatPane是地图图层（窗格 6）
http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView
http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView
回答by Avishek
This is probably a late find.. but hope someone would find this useful.
这可能是一个较晚的发现......但希望有人会发现这很有用。
If you don't want to use floatPane(John's Solution) as this will be always on top of everything, and want to give a custom zIndex.. Edit the maplabel.js. Add the following line just before the end of MapLabel.prototype.onAdd = function() {
如果您不想使用floatPane（John 的解决方案），因为这将始终位于一切之上，并且想要提供自定义 zIndex .. 编辑maplabel.js。在MapLabel.prototype.onAdd = function() {结束前添加以下行
if (canvas.parentNode != null) {
canvas.parentNode.style.zIndex = style.zIndex;
}
Now you can pass zIndexwhile creating a maplabel:
现在您可以zIndex在创建maplabel 时通过：
var mapLabel = new MapLabel({
text: "abc",
position: center,
map: map,
fontSize: 8,
align: 'left',
zIndex: 15
});
回答by brouxhaha
If you don't want to touch maplabel.js, you can add this function to change the z-indexof the parent of the labels (although if you have other canvaselements, you may need to alter the function):
如果你不想 touch 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;
}
});
回答by Wanfactory
var maplabel = new MapLabel....
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex);
jQuery made it pretty simple for me without changing maplabel.js I also found an alternate solution
jQuery 对我来说非常简单，无需更改 maplabel.js 我还找到了一个替代解决方案
$(maplabel.getPanes().mapPane).addClass('map-pane');
and then defining the z-index in a stylesheet
然后在样式表中定义 z-index
回答by Alan David Garcia
I sketched up this CodePen exampleutilizing the gmaps-labelsclass. It is based on the fiddle in the Q above and adds the ose of a LabelOverlayclass. The class requires a new google.maps.LatLng, dimensions (in LatLng units) of a box centered around the label's point (If the label would overflow this box, hide it, and some CSS. Heres a code stub, check out the demo in the CodePen.
我使用gmaps-labels类勾画了这个CodePen 示例。它基于上面 Q 中的 fiddle，并添加了一个类的 ose 。该类需要一个以标签点为中心的框的尺寸（以 LatLng 为单位）（如果标签会溢出此框，请将其隐藏，还有一些。这是一个代码存根，请查看 CodePen 中的演示。LabelOverlaynew google.maps.LatLngCSS
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
});
回答by Chris Broadfoot
Great to see that you're using the MapLabel utility library!
很高兴看到您正在使用 MapLabel 实用程序库！
As you've found out, the MapLabel sits in a different map pane. zIndexis only respected within a certain pane.
正如您所发现的，MapLabel 位于不同的地图窗格中。zIndex仅在某个窗格中受到尊重。
