在多边形叠加层上方显示自定义MapType [英] Show custom MapType over top of polygon overlays

问题描述

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

I've been working with Gheat to create customized heat maps as an ImageMapType. I also have a number of color-coded polygons I would like to show beneath the highlights created by the heatmap.

但是，自定义ImageMapType始终在多边形下方渲染，并被多边形遮挡.我该如何解决?

However, the custom ImageMapType always renders below the polygons, and is obscured by them. How can I fix this?

下面的示例代码:

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

推荐答案

更新2(2016年9月22日):

这种黑客越来越难以管理，但是现在，这是更新的代码:

Update 2 (2016 Sept 22):

This hack is getting harder to manage, but for now, here's the updated code:

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

更新:

原始答案的代码停止工作.这段新代码对我有用:

Update:

The code for the original answer stopped working. This new code works for me:

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

102是使它工作的最小zIndex.您可以提高安全性.

102 was the smallest zIndex that got it to work. You can make it a lot higher to be safe.

我不希望它来到这里.这是我的解决方法.

I didn't want it to have to come to this. Here is my solution.

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

el是地图所在的<div>.

这篇关于在多边形叠加层上方显示自定义MapType的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！