Geoxml3 groundOverlay zIndex

问题

Is there a way to change the zIndex of a groundOverlay?

With Geoxml3 I am parsing two KML files, one of them contains a polygon and the other one contains a groundOverlay. Everythings goes perfect except for the fact that i want my groundOverlay OVER the polygon, because now the groundOverlay appears behind the polygon.

Update: This is my code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Geoxml3</title>
<style>
    html{height:100%;}
    body{height:100%;margin:0px;}
    #map_canvas{height: 90%;width: 90%;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js">
</script>
</head>
<body>
<div id="map_canvas"></div>
</div>
<script type="text/javascript">
var geoXml=null, map=null;

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(39.397, -100.644),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    geoXml = new geoXML3.parser({
        map: map,
        zoom: true,
        createOverlay: addMyOverlay
    });

    geoXml.parse(['groundOverlay.kml','polygon.kml']);

    function addMyOverlay(placemark,doc){
        //How to change the the GroundOverlay zIndex
        var groundOverlay = geoXml.createOverlay(placemark);
        return groundOverlay;
    };
};
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</body>
</html>

The test is here: http://jorgeluisperez.260mb.net/geoxml/

回答1:

Probably the easiest way would be to specify zIndex for GroundOverlay once the map is loaded:

google.maps.event.addListenerOnce(map, 'idle', function(){
      var overlayDiv = document.getElementById(groundOverlay.id_);
      overlayDiv.style.zIndex = '999';
      console.log(overlayDiv);
});

Note: groundOverlay should be accessible from event

Working example: Plunker

回答2:

The ProjectedOverlay class which is used to render GroundOverlays in geoxml3 attaches the overlays to the overlayLayer. That is the same pane in which polygons are rendered. The OverlayView class doesn't support zIndex, and the zIndex supported by Polygons specifically states it is only good between "polys". It is possible that the order of adding the Polygons vs. the GroundOverlays might change that, but a quick test didn't work. You could modify the ProjectedOverlay code to append the overlay to a pane above the overlayLayer.

from the documentation on MapPanes:

This object contains the DOM elements in which overlays are rendered. They are listed below with 'Pane 0' at the bottom and 'Pane 4' at the top.

Properties

floatPane | This pane contains the info window. It is above all map overlays. (Pane 4).
mapPane | This pane is the lowest pane and is above the tiles. It may not receive DOM events. (Pane 0).
markerLayer | This pane contains markers. It may not receive DOM events. (Pane 2).
overlayLayer | This pane contains polylines, polygons, ground overlays and tile layer overlays. It may not receive DOM events. (Pane 1).
overlayMouseTarget | This pane contains elements that receive DOM events. (Pane 3).

来源：https://stackoverflow.com/questions/30903703/geoxml3-groundoverlay-zindex

标签

google-maps-api-3

geoxml3