在我的谷歌地图中添加KMZ文件时，是否有方法将图像覆盖层置于多边形上方？

Question

我的网站上有一个谷歌地图页面，我想在那里加载一系列显示地块的KMZ文件。我正在Google Earth中生成KMZ，它由一个图像覆盖和一系列多边形组成。我首先加载图像叠加，它是一个由黑线和透明背景组成的PNG，这显示了地块的边界线。然后，我在这幅图像上绘制多边形，将相关的图分组。在从Google Earth导出KMZ之前，我确保图像显示在前景中，多边形上方。然而，在将KMZ导出并加载到我的网页上的谷歌地图后，图像覆盖在后面，多边形在顶部分层，模糊了图像中显示的边界线细节。

我在Google Earth中尝试了以下选项以将图像置于顶部，但没有任何一个选项能够在我的地图中实现正确的分层：

• 将高度设置为“绝对”并升高到

但是，这些尝试中的每一个仍然导致KMZ在我的网页中显示不正确-图像叠加显示在后面：

我还尝试将多边形放入一个KMZ中，将图像叠加放入另一个KMZ中，分别将每个KMZ的zIndex与图像一起加载到我的地图中，并且图像叠加仍然在多边形下方分层。

根据添加KMZ文件的客户端代码（如果我在那里做了一些错误的事情），我会获取每个KMZ的URL，并将其传递到以下方法中：

function addKMZFile(myMap, kmzUrl) {
    var kmzLayer = new google.maps.KmlLayer({
        url: kmzUrl,
        preserveViewport: true,
        map: myMap,
        clickable: true
    });
}

我已将一个示例KMZ上载到我的文件服务器，可用于测试目的（KMZ使用上述方法添加到我的地图中）：http://bassmanjase.altervista.org/SO_Test.kmz

在谷歌地图KML文档中，我似乎看不到任何关于图像覆盖或KML中如何进行分层的具体提及。有没有办法配置KML，以便在谷歌地图中显示时，图像覆盖层位于多边形上方？

Answer 1

我能够用这种风格来实现它：

#map > div > div > div > div > div:nth-child(2) img[draggable="false"] {
  opacity: 0.4;
}

Answer 2

由于在Google Maps中似乎没有一种方法可以本地渲染多边形上方的覆盖，因此我采用的解决方法是降低多边形的不透明度，以便覆盖在多边形下方可见。

这还提供了额外的好处，即底层地图图像有些可见（因为我的覆盖层具有透明背景）：