在谷歌地图 API v3 中切换多个 KML/KML 图层 [英] Toggle multiple KML/KML layers in google maps API v3
本文介绍了在谷歌地图 API v3 中切换多个 KML/KML 图层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在尝试在谷歌地图中切换 KML 图层.我已经将它设置为只显示一层而没有任何切换按钮.我在网上关注了很多例子，但似乎没有一个工作.到目前为止，我设置的代码如下:
I have been tying to toggle KML layers in google maps. I have had it setup such that only one layer shows up with out any toggle button. I followed many examples online but none seem to work. The code I have setup so far is below:
<html>
<head>
<script type="text/javascript">
var layers=[];
layers[0] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml',
{preserveViewport: true});
layers[1] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz',
{preserveViewport: true});
var map;
function initialize() {
var latlng = new google.maps.LatLng(52.5028910, 13.41032740);
var myOptions = {
zoom: 3,
center: latlng,
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
function toggleLayers(i)
{
if(layers[i].getmap()==null){
kmlLayer01.setMap(null);
}
else{
layers[i].setMap(null);
}
}
</script> </head>
<body onload="initialize()">
Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
<div id="map_canvas"></div>
</body>
</html>
请帮忙！
推荐答案
发布的代码不包含 API，这是缺失的:
the posted code does not include the API, this is missing:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
有几个错别字:
There are a few typos:
- javascript 区分大小写 getmap 不是有效的方法名称，应该是 getMap.
kmlLayer01 没有定义，应该是layers[i]
- javascript is case sensitive getmap is not a valid method name, should be getMap.
kmlLayer01 is not defined, probably should be layers[i]
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var layers=[];
layers[0] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml',
{preserveViewport: true});
layers[1] = new google.maps.KmlLayer('http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz',
{preserveViewport: true});
var map;
function initialize() {
var latlng = new google.maps.LatLng(52.5028910, 13.41032740);
var myOptions = {
zoom: 3,
center: latlng,
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
function toggleLayers(i)
{
if(layers[i].getMap()==null) {
layers[i].setMap(map);
}
else {
layers[i].setMap(null);
}
document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
}
</script>
</head>
<body onload="initialize()">
Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>
</body>
</html>
代码片段:
var layers = [];
layers[0] = new google.maps.KmlLayer("http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml",
/*'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5254.kml', original KML no longer available */
{
preserveViewport: true
});
layers[1] = new google.maps.KmlLayer("http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml",
/* 'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz', original KML no longer available */
{
preserveViewport: true
});
var map;
function initialize() {
var latlng = new google.maps.LatLng(38, -112 /*52.5028910, 13.41032740 */ );
var myOptions = {
zoom: 5,
center: latlng,
mapTypeIds: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function toggleLayers(i) {
if (layers[i].getMap() == null) {
layers[i].setMap(map);
} else {
layers[i].setMap(null);
}
document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
}
google.maps.event.addDomListener(window, 'load', initialize);<script src="http://maps.google.com/maps/api/js"></script>
Layer1
<input type="checkbox" id="layer_01" onclick="toggleLayers(0);" />Layer2
<input type="checkbox" id="layer_02" onclick="toggleLayers(1);" />
<div id="map_canvas" style="height:500px; width:600px;"></div>
<div id="status"></div>这篇关于在谷歌地图 API v3 中切换多个 KML/KML 图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
