Google Maps V3 API如何管理多边形的Z-Index?

时间:2013-04-29 06:19:24

标签: google-maps-api-3

我有两个多边形:bigsmall - 小的多边形包含在其中。

我是否执行:

//show big, then small...
big.setMap(null);
big.setMap(map);
small.setMap(null);
small.setMap(map);

或者我执行:

//show small, then big...
small.setMap(null);
small.setMap(map);
big.setMap(null);
big.setMap(map);

我总是以大多边形结束。这意味着,我无法在小多边形上接收鼠标事件,因为它被大多边形隐藏了。

Google Maps V3 API如何管理多边形的Z-Index?我想我将不得不在更大的多边形上钻一个洞,让较小的一个穿过......但是如果有一个更优雅的解决方案,我宁愿不要。

2 个答案:

答案 0 :(得分:4)

似乎没有特定的zIndex管理,类似于HTML文档中的元素,当您使用多个多边形而不设置zIndex多边形时,定义多边形的文档内元素的顺序将影响行为稍后创建的将显示在现有多边形上方。

实现的覆盖此行为的解决方案是设置多边形的zIndex属性,使smallzIndex更高big

答案 1 :(得分:1)

你的多边形是完全不透明的,还是它们有透明度?

如果它们不透明,您可以使用zIndex对象上的Polygon,正如Molle博士指出的那样。

如果它们是部分透明的,那么可能无法提供您想要的效果 - 除非您确实希望将多边形填充颜色进行alpha混合。

如果您不希望填充颜色混合,那么您确实需要在较大的多边形中剪切一个洞。不过,这真的很简单。您只需要在较大的多边形上添加第二个环,并为其指定与较小的多边形相同的坐标,但坐标的顺序相反。您可以使用以下命令复制数组并反转副本:

var reversed = [].concat(array).reverse();

以下是polygon with a hole in it的示例。