在多边形叠加层之上显示自定义 MapType答案

【问题标题】：Show custom MapType over top of polygon overlays在多边形叠加层之上显示自定义 MapType
【发布时间】：2020-01-13 18:11:29
【问题描述】：

我一直在与 Gheat 合作，将自定义热图创建为 ImageMapType。我还想在热图创建的高光下方显示一些颜色编码的多边形。

但是，自定义 ImageMapType 始终呈现在多边形下方，并被它们遮挡。我该如何解决这个问题？

示例代码如下：

 var heatmap = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
    ...
    });

    var mapOptions = {...};
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

var neighborhood1 = new google.maps.Polygon({...});
neighborhood1.setMap(map);
... lots of polys ...

    map.overlayMapTypes.insertAt(map.overlayMapTypes.length -1, heatmap);

【问题讨论】：

您是否尝试过在多边形上设置高 z-index？此外，如果您可以在客户端生成热图，请考虑使用new Heatmap Layer in the Google Maps API。
我尝试将多边形上的 zIndex 设置为 0（我希望它们位于热图后面），但这并没有帮助。回复：谷歌热图层——有 1000 个点，如果我使用谷歌的 API，我需要弄清楚如何在服务器端进行密度计算，这是 GHeat 为我做的。
对不起，我读错了问题。多边形上的负 zindex 怎么样？我认为它不会起作用，因为您使用的是 MapType，它默认呈现在其他叠加层（多边形、标记等）下方。不过，您可以订购 ImageMapTypes，因此另一种选择是生成多边形服务器端的切片并将切片渲染为热图图层下的 ImageMapType。
看我的回答，最后的评论可能没有实际意义

标签： google-maps-api-3

【解决方案1】：

更新 2（2016 年 9 月 22 日）：

这个 hack 越来越难以管理，但现在，这里是更新的代码：

el.firstChild.firstChild.firstChild.firstChild.firstChild.style.zIndex = 102

更新：

原始答案的代码停止工作。这个新代码对我有用：

el.firstChild.firstChild.firstChild.firstChild.style.zIndex = 102

102 是使其工作的最小 zIndex。为了安全起见，您可以提高很多。

原答案：

我不想让它变成这样。这是我的解决方案。

el.firstChild.firstChild.firstChild.childNodes[3].style.zIndex = 300

其中el 是地图所在的<div>。

【讨论】：

【解决方案2】：

这是解决此客户端的一种方法：z-Index overlay in google maps version 3

【讨论】：

热图是 ImageMapType，而不是 OverlayView。似乎没有办法操纵 ImageMapType 的 zIndex。您是说热图应该构建为 OverlayView？
啊，是的，你是对的，这个修复是针对 OverlayView...不确定 ImageMapType 是否可以以同样的方式操作。