Question

有没有办法更改groundOverlay的zIndex？

使用Geoxml3我正在解析两个KML文件，其中一个包含多边形，另一个包含一个groundOverlay。除了事实上我希望我的地面超过多边形之外，所有事情都是完美的，因为现在地面覆盖物出现在多边形的后面。

更新：这是我的代码

<!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>

测试在这里： http://jorgeluisperez.260mb.net/geoxml/

Answer 1

用于在geoxml3中呈现GroundOverlays的ProjectedOverlay类会将叠加层附加到overlayLayer。这是渲染多边形的窗格。 OverlayView类不支持zIndex，并且Polygons支持的zIndex明确指出它只适用于＆＃34; polys＆＃34;。添加多边形与GroundOverlays的顺序可能会改变，但a quick test无法正常工作。您可以修改ProjectedOverlay代码，将叠加层附加到overlayLayer上方的窗格中。

来自the documentation on MapPanes：

此对象包含呈现叠加层的DOM元素。它们列在下面的＆＃39;窗格0＆＃39;在底部和＆＃39;窗格4＆＃39;在顶部。

属性

floatPane |此窗格包含信息窗口。它首先是地图叠加层。（窗格4）。
mapPane |此窗格是最低窗格，位于切片上方。它可能不会收到DOM事件。（窗格0）。
markerLayer |此窗格包含标记。它可能不会收到DOM事件。（窗格2）。
overlayLayer |此窗格包含折线，多边形，地面叠加层和切片图层叠加层。它可能不会收到DOM事件。（窗格1）。
overlayMouseTarget |此窗格包含接收DOM事件的元素。（窗格3）。

Answer 2

加载地图后，最简单的方法可能是为zIndex指定GroundOverlay：

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

注意：groundOverlay应该可以从事件
访问

工作示例：Plunker

Geoxml3 groundOverlay zIndex

2 个答案: