Geoxml3 groundOverlay zIndex答案

【问题标题】：Geoxml3 groundOverlay zIndexGeoxml3 groundOverlay zIndex
【发布时间】：2015-06-25 05:05:11
【问题描述】：

有没有办法改变groundOverlay的zIndex？

使用 Geoxml3 我正在解析两个 KML 文件，其中一个包含一个多边形，另一个包含一个 groundOverlay。一切都很完美，除了我希望我的 groundOverlay 覆盖多边形，因为现在 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/

【问题讨论】：

您现有的代码是什么样的？请提供一个 Minimal, Complete, Tested and Readable example 来证明该问题。
更新了问题！谢谢

标签： google-maps-api-3 geoxml3

【解决方案1】：

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

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

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

工作示例：Plunker

【讨论】：

【解决方案2】：

ProjectedOverlay 类用于在 geoxml3 中渲染 GroundOverlays，将叠加层附加到 overlayLayer。这是渲染多边形的同一个窗格。 OverlayView 类不支持 zIndex，Polygons 支持的 zIndex 明确指出它只适用于“多边形”之间。添加 Polygons 与 GroundOverlays 的顺序可能会改变这一点，但 a quick test 不起作用。您可以修改 ProjectedOverlay 代码以将叠加层附加到叠加层上方的窗格中。

来自the documentation on MapPanes：

此对象包含渲染叠加层的 DOM 元素。下面列出了它们，底部为“窗格 0”，顶部为“窗格 4”。

属性

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

【讨论】：