本文介绍了Geoxml3 groundOverlay zIndex的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有没有办法改变一个groundOverlay的zIndex？使用Geoxml3我解析两个KML文件，其中一个包含一个多边形，另一个包含一个多边形一个groundOverlay。更新：
这是我的代码，除了这个事实，我希望我的groundOverlay覆盖多边形，因为现在groundOverlay出现在多边形后面。
更新：
这是我的代码
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Geoxml3< / title>
< style>
{height：100％;}
body {height：100％; margin：0px;}
#map_canvas {height：90％; width：90％;}
< /风格>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js><<< ; /脚本>
< script src =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascriptsrc =http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js>< / script>
< script type =text / javascriptsrc =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;
函数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）;
$ b geoXml = new geoXML3.parser（{
map：map，
zoom：true，
createOverlay：addMyOverlay
}）;
geoXml.parse（['groundOverlay.kml'，'polygon.kml']）;
函数addMyOverlay（placemark，doc）{
//如何更改GroundOverlay zIndex
var groundOverlay = geoXml.createOverlay（placemark）;
return groundOverlay;
};
};
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / body>
< / html>
测试如下：
解决方案
一旦地图加载，最简单的方法可能是为 GroundOverlay 指定 zIndex ：
$ p $
google.maps.event.addListenerOnce（map，'idle'，function（）{
var overlayDiv = document.getElementById（groundOverlay .id_）;
overlayDiv.style.zIndex ='999';
console.log（overlayDiv）;
}）;
工作示例：
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/
解决方案
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);
});
Working example: Plunker
这篇关于Geoxml3 groundOverlay zIndex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！