Javascript 谷歌地图版本 3 中的 z-Index 叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2682626/
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
z-Index overlay in google maps version 3
提问by fredrik
I'm trying to get an overlay in google maps api v3 to appear above all markers. But it seems that the google api always put my overlay with lowest z-index priority. Only solution i've found is to iterate up through the DOM tree and manually set z-index to a higher value. Poor solution.
我正在尝试在 google maps api v3 中获得一个叠加层以显示在所有标记之上。但似乎 google api 总是把我的覆盖层放在最低的 z-index 优先级。我发现的唯一解决方案是遍历 DOM 树并手动将 z-index 设置为更高的值。糟糕的解决方案。
I'm adding my a new div to my overlay with:
我正在将我的新 div 添加到我的叠加层中：
onclick : function (e) {
var index = $(e.target).index(),
lngLatXYposition = $.view.overlay.getProjection().fromLatLngToDivPixel(this.getPosition());
icon = this.getIcon(),
x = lngLatXYposition.x - icon.anchor.x,
y = lngLatXYposition.y - icon.anchor.y
$('<div>test</div>').css({ left: x, position: 'absolute', top: y + 'px', zIndex: 1000 }).appendTo('.overlay');
}
I've tried every property I could think of while creating my overlay. zIndex, zPriority etc.
在创建叠加层时，我已经尝试了我能想到的所有属性。zIndex、zPriority 等
I'm adding my overlay with:
我正在添加我的叠加层：
$.view.overlay = new GmapOverlay( { map: view.map.gmap });
And GmapOverlay inherits from new google.maps.OverlayView.
而 GmapOverlay 继承自新的 google.maps.OverlayView。
Any ideas?
有任何想法吗？
..fredrik
..弗雷德里克
回答by Mikepote
If anyone was having the same problem as I was, here is my problem and solution:
如果有人和我有同样的问题，这是我的问题和解决方案：
I needed an OverlayView which would add tooltips to markers, but my popup overlay kept showing behindthe markers.
我需要一个 OverlayView 来为标记添加工具提示，但我的弹出叠加层一直显示在标记后面。
I implemented a subclass of the OverlayView as per the Google documentation: https://developers.google.com/maps/documentation/javascript/customoverlays
我按照 Google 文档实现了 OverlayView 的一个子类：https: //developers.google.com/maps/documentation/javascript/customoverlays
When you write your custom OverlayView.prototype.onAddfunction, you need to specify to which Pane to attach your overlay. I just copied the code without actually reading the surrounding explanation.
当您编写自定义OverlayView.prototype.onAdd函数时，您需要指定要将叠加层附加到哪个窗格。我只是复制了代码，而没有真正阅读周围的解释。
In their code, they attach the overlay to the overlayLayerpane:
在他们的代码中，他们将叠加层附加到overlayLayer窗格中：
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
But there are many different MapPanes you can use:
但是您可以使用许多不同的 MapPanes：
"The set of panes, of type MapPanes, specify the stacking order for different layers on the map. The following panes are possible, and enumerated in the order in which they are stacked from bottom to top:"
“MapPanes 类型的一组窗格指定地图上不同图层的堆叠顺序。以下窗格是可能的，并按照它们从下到上堆叠的顺序进行枚举：”
- MapPanes.mapPane (Level 0)
- MapPanes.overlayLayer (Level 1)
- MapPanes.markerLayer (Level 2)
- MapPanes.overlayMouseTarget (Level 3)
- MapPanes.floatPane (Level 4)
- MapPanes.mapPane（级别 0）
- MapPanes.overlayLayer（级别 1）
- MapPanes.markerLayer（级别 2）
- MapPanes.overlayMouseTarget（级别 3）
- MapPanes.floatPane（4 级）
I wanted the overlay to hover over all other info on the map, so I used the floatPanepane and problem solved.
我希望叠加层悬停在地图上的所有其他信息上，所以我使用了floatPane窗格并解决了问题。
So, instead of :
所以，而不是：
this.getPanes().overlayLayer.appendChild(div)
you use this :
你用这个：
this.getPanes().floatPane.appendChild(div);
回答by Bj?rn
You can't change the zIndex of an OverlayView (it has no such property), but it holds panes that contains DOM nodes. That's where you can use the z-index property;
您不能更改 OverlayView 的 zIndex（它没有这样的属性），但它包含包含 DOM 节点的窗格。这就是您可以使用 z-index 属性的地方；
...
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001;
...
回答by Gabriel
In order to be able to play around with the paneType of the mapLabel class, I added a paneType property to the MapLabel class from google utility library (https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303).
为了能够使用 mapLabel 类的 paneType，我从 google 实用程序库 ( https://code.google.com/p/google-maps-utility-library- v3/source/browse/trunk/maplabel/src/maplabel.js?r=303）。
This is usefull to make the label not to be hidden by a polyline.
这对于使标签不被折线隐藏很有用。
Please find the code additions to the mapLabel.js file.
请在 mapLabel.js 文件中找到添加的代码。
MapLabel.prototype.onAdd = function() {
var canvas = this.canvas_ = document.createElement('canvas');
var style = canvas.style;
style.position = 'absolute';
var ctx = canvas.getContext('2d');
ctx.lineJoin = 'round';
ctx.textBaseline = 'top';
this.drawCanvas_();
var panes = this.getPanes();
if (panes) {
// OLD: panes.mapPane.appendChild(canvas)
var paneType = this.get('paneType');
panes[paneType].appendChild(canvas);
}
};
MapLabel = function (opt_options) {
this.set('fontFamily', 'sans-serif');
this.set('fontSize', 12);
this.set('fontColor', '#000000');
this.set('strokeWeight', 4);
this.set('strokeColor', '#ffffff');
this.set('align', 'center');
this.set('zIndex', 1e3);
this.set('paneType', 'floatPane');
this.setValues(opt_options);
}
Sample code using the paneType:
使用 paneType 的示例代码：
var mapLabel = new MapLabel({
text: segDoc.curr_value.toFixed(0),
position: new google.maps.LatLng(lblLat, lblLng),
map: map.instance,
fontSize: 12,
align: 'center',
zIndex: 10000,
paneType: 'floatPane',
});
Thanks!
谢谢！
回答by Clamburger
Disclaimer: this is a dodgy solution that may stop working at any time and you definitely shouldn't use this in production.
免责声明：这是一个狡猾的解决方案，可能随时停止工作，您绝对不应该在生产中使用它。
For those looking for a quick and dirty solution, this CSS worked for me:
对于那些寻求快速而肮脏的解决方案的人来说，这个 CSS 对我有用：
.gm-style > div:first-child > div:first-child > div:nth-child(4) {
z-index: 99 !important;
}
Use at your own risk!
使用风险自负！
回答by psorr
Setting z-index to 104 for the overLay layer seems to be the "magic" number" if you care about interacting with the markers (i.e. dragging markers). Any higher than 104 and you can not interact with the markers. Wondering if there is a less brittle solution...
如果您关心与标记的交互（即拖动标记），则将叠加层的 z-index 设置为 104 似乎是“神奇”数字。任何高于 104 的值都无法与标记交互。想知道是否有一个不那么脆弱的解决方案......
回答by Layke
Use panes.overlayMouseTarget.appendChild
使用 panes.overlayMouseTarget.appendChild
If you want to allow your layer to be targetable through mouse clicks (and use events such as "click" or CSS pseudo ::hover) then you should add your overlay to the map using overlayMouseTarget
如果您想让您的图层可通过鼠标点击定位（并使用诸如“点击”或 CSS 伪 ::hover 之类的事件），那么您应该使用 overlayMouseTarget
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(this.div_);
var 窗格 = this.getPanes();
窗格.overlayMouseTarget.appendChild(this.div_);
Also see: https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes
另请参阅：https: //developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes
