Google 地图:多边形和标记 Z-Index [英] Google Maps: Polygon and Marker Z-Index

问题描述

我有一个带有许多标记(黄色圆圈)的 Google 地图，我实现了一个工具来在标记上绘制多边形.但是，多边形在绘制时位于标记后面(并在完成时留在后面).

I have a Google Map with many markers (yellow circles), and I implemented a tool to draw polygons over the markers. However, the polygon is behind the markers while drawing (and stays behind when complete).

我尝试更改标记和多边形中的 ZIndex，但它似乎改变了标记相对于其他标记的显示方式，而不是相对于多边形的显示方式.我也试过

I tried changing the ZIndex in both markers and polygons, but it seems to alter the way in which markers are shown with respect to other markers, and not with respect to polygons. I also tried

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

如何将多边形带到前面?

How can I bring the polygon to the front?

推荐答案

这不能解决问题，但可以解释为什么您尝试的方法没有奏效.

This won't solve the problem, but it will explain why the things you tried didn't work.

Maps API 在固定的位置使用多个称为 MapPanes 的图层Z顺序:

The Maps API uses several layers known as MapPanes in a fixed Z order:

• 4:floatPane(信息窗口)
• 3:overlayMouseTarget(鼠标事件)
• 2:markerLayer(标记图像)
• 1:overlayLayer(多边形、折线、地面叠加层、瓷砖层叠加层)
• 0:mapPane(地图图块上方的最低窗格)

因此，第 2 层中的标记图像始终位于第 1 层中的多边形上方.当您调整标记上的 z-index 时，您只是相对于彼此进行了调整.这没有任何好处，因为它们都在多边形上方的一层中.

So the marker images in layer 2 are always above the polygons in layer 1. When you fiddle with the z-index on the markers, you're just adjusting them relative to each other. That doesn't do any good, because they are all in a layer above the polygons.

你能怎么办?我能想到的唯一解决方案是创建您自己的 OverlayView多边形或标记，以便您可以将它们放入所需的 MapPane 中.

What can you do about this? The only solution I can think of is to create your own OverlayView for the polygons or the markers so you can put them in the MapPane you want.

您的标记是可点击的，还是只是静态图像?如果它们不可点击，您可以自己在 mapPane 中绘制它们.那么你的多边形就会在它们上面.或者相反:您可以自己在较高层之一中绘制多边形，也许在 floatShadow 中.

Are your markers clickable, or are they just static images? If they aren't clickable, you could possibly get away with drawing them yourself in the mapPane. Then your polygons would be above them. Or the opposite: you could draw the polygons yourself in one of the higher layers, maybe in floatShadow.

问题是您必须自己绘制所有内容，无论是使用 canvas 元素还是使用 DOM 图像.如果可点击，您自己的鼠标点击测试也是如此.

The problem then is you have to do all of your own drawing, either with a canvas element or with DOM images. And your own mouse hit testing too if they are clickable.

那里没有很多好的 OverlayView 示例，但我会提到我自己的一个:我不久前写的一个名为 PolyGonzo，其中 polygonzo.js 文件具有 OverlayView 实现.代码不是很好 - 我太匆忙地把它放在一起 - 但它可能有助于给你一些想法.

There aren't a lot of good OverlayView examples out there, but I'll mention one of my own: a little library I wrote a while ago called PolyGonzo, where the polygonzo.js file has the OverlayView implementation. The code isn't great - I threw it together in too much of a hurry - but it may help give you some ideas.

这篇关于Google 地图:多边形和标记 Z-Index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！