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

问题描述

我有一个带有多个标记的黄色地图（黄色圆圈），我使用了一个工具在标记上绘制多边形。但是，多边形在绘制时位于标记后面（并且在完成时保留）。 QAhTS.pngalt =标记下面的活动多边形绘图工具。>

我试图在标记和多边形中更改ZIndex，但它似乎改变了方式其中关于其他标记显示标记，而不显示关于多边形的标记。我也试过
$ b $ pre $ lt; code> polygon.setZIndex（google.maps.Marker.MAX_ZINDEX + 1）;

如何将多边形放到前面？

解决方案

这并不能解决问题，但它可以解释为什么你尝试过的东西没有用。

地图API使用固定Z顺序中称为 MapPanes 的多个图层：

• 4：floatPane（infowindow）


• 3：overlayMouseTarget（鼠标事件）
>

• 2：markerLayer（标记图像）
  
• 1：overlayLayer（多边形，多段线，地面叠加层，拼贴图层叠层）
  
• 0：mapPane（地图图块上方的最低窗格）

因此，图层2中的标记图像总是位于图层中的多边形之上1.当你在标记上摆弄z-index时，你只是相对于彼此调整它们。这并没有什么好处，因为它们都在多边形之上的层中。

你能做些什么？我能想到的唯一解决方案是创建自己的 OverlayView 多边形或标记，因此您可以将它们放入您想要的MapPane中。

您的标记是可点击的，还是仅仅是静态图像？如果它们不是可点击的，你可能会在 mapPane 中自行绘制它们。然后你的多边形会在它们之上。或者相反：你可以在一个更高层次中自己绘制多边形，也许在 floatShadow 。

问题，那么你必须用 canvas 元素或DOM图像来完成自己的绘图。如果它们是可单击的，你自己的鼠标也会进行测试。

OverlayView 示例并不多在那里，但我会提到我自己的一个：我刚才写的一个小图书馆叫做 PolyGonzo ，其中 polygonzo.js 文件包含 OverlayView 实现。代码不是很好 - 我把它扔在一起太急于 - 但它可能会给你一些想法。

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).

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.

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

• 4: floatPane (infowindow)
• 3: overlayMouseTarget (mouse events)
• 2: markerLayer (marker images)
• 1: overlayLayer (polygons, polylines, ground overlays, tile layer overlays)
• 0: mapPane (lowest pane above the map tiles)

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.

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.

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.

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.

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屋！