Show custom MapType over top of polygon overlays

问题

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.

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

Example code below:

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

回答1:

Update 2 (2016 Spet 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 was the smallest zIndex that got it to work. You can make it a lot higher to be safe.

Orignal answer:

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

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

Where el is the <div> that the map is in.

回答2:

Here's a way to solve this client-side: z-Index overlay in google maps version 3

来源：https://stackoverflow.com/questions/13653785/show-custom-maptype-over-top-of-polygon-overlays

标签

google-maps-api-3