Geoxml3 groundOverlay zIndex

Question

有没有办法改变 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/

Answer 1

用于在 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 中呈现 GroundOverlays 的 ProjectedOverlay class 不起作用。您可以修改 ProjectedOverlay 代码以将叠加层附加到 overlayLayer 上方的窗格。

来自 the documentation on MapPanes:

此对象包含呈现叠加层的 DOM 个元素。它们在下面列出，'Pane 0' 在底部，'Pane 4' 在顶部。

属性

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

Answer 2

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

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

工作示例：Plunker

Geoxml3 groundOverlay zIndex

Geoxml3 groundOverlay zIndex

google-maps-api-3

geoxml3