设置自定义叠加层和多边形的任意z-index排序

时间:2016-04-09 00:08:34

标签: javascript google-maps google-maps-api-3

我实现了一个非常类似于Google(https://developers.google.com/maps/documentation/javascript/examples/overlay-simple)提供的USGSOverlay示例的自定义叠加层。为此,我添加了设置用于显示任意图像的div的z-index的功能。工作正常 - 我可以完全控制自定义叠加层的相对深度排序。

我还想在地图上显示各种多边形。当然,我可以通过Polygon.setOptions()设置它们的z-index来控制这些元素的相对深度排序。这也很好。

按照设计,自定义叠加层和多边形都在OverlayLayer上。我想任意控制我的多边形(P1,P2,...)和我的自定义叠加(O1,O2,...)的相对深度排序,包括不同类型的交错。例如,我可能想要订购P1,O1,O2,P2,O3,P3。但是,z-index小于30的叠加始终显示在所有多边形后面(无论多边形z-index),并且z-index为30或更大的叠加显示在所有多边形的前面(无论多边形z-index)。

希望失去所有希望吗?

1 个答案:

答案 0 :(得分:0)

您可以尝试使用MapPanes。 MapPanes类型的窗格指定地图上不同图层的堆叠顺序。

以下窗格可供使用,并按照从下到上堆叠的顺序进行枚举:

  • mapPane是最低的窗格,位于切片上方。它可能不会收到DOM事件。 (窗格0)。

  • overlayLayer包含折线,多边形,地面叠加层和切片图层叠加层。它可能不会收到DOM事件。 (窗格1)。

  • overlayShadow包含标记阴影。它可能不会收到DOM事件。 (窗格2)。 overlayImage包含标记前景图像。 (窗格3)。

  • floatShadow包含信息窗口阴影。它位于overlayImage上方,因此标记可以位于信息窗口的阴影中。 (窗格4)。

  • overlayMouseTarget包含接收DOM鼠标事件的元素,例如标记的透明目标。它位于floatShadow上方,因此信息窗口阴影中的标记可以被点击。 (窗格5)。

  • floatPane包含信息窗口。它首先是地图叠加层。 (窗格6)。

此对象包含呈现叠加层的DOM元素。它们列在下面的'窗格0'在底部和'窗格6'在顶部。

如果可以帮助您,请尝试检查此SO question