0

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

4

2 回答 2

0

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

来自MapPanes 上的文档：

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

特性

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

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

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

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

工作示例：Plunker

于 2015-06-24T21:05:11.473 回答