在Google Maps API v3中切换多个KML / KML图层 [英] Toggle multiple KML/KML layers in google maps API v3
本文介绍了在Google Maps API v3中切换多个KML / KML图层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在绑定Google地图中的KML图层。我已经安装了这样的设置，只有一层显示出来没有任何切换按钮。我在网上跟随了很多例子，但似乎没有任何工作。我设置的代码如下：
< 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;
函数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）;
$ b $ function toggleLayers（i）
{
if（layers [i] .getmap（）== null）{
kmlLayer01.setMap（空值）;
}
else {
layers [i] .setMap（null）;
}
}
< / script> < /头>
< body onload =initialize（）>
Layer1< input type =checkboxid =layer_01onclick =toggleLayers（0）;/>
Layer2< input type =checkboxid =layer_02onclick =toggleLayers（1）;/>
< div id =map_canvas>< / div>
< / body>
< / html>
请帮助！
解决方案
<$>
发布的代码不包含API， c $ c>< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
有几个错别字：
- javascript区分大小写getmap不是有效的方法名称，应该是getMap。
-
kmlLayer01未定义，可能应该是图层[ i]
< html>
< head>
< script type =text / javascriptsrc =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}）;
图层[1] =新增google.maps.KmlLayer（'http://wrf1.geology.um.maine.edu/bipush/kml/plot_5938.kmz'，
{preserveViewport ：true}）;
var map;
函数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）;
$ b $ function toggleLayers（i）
{
if（layers [i] .getMap（）== null）{
层[I] .setMap（地图）;
}
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 =checkboxid =layer_01onclick =toggleLayers（0）;/>
Layer2< input type =checkboxid =layer_02onclick =toggleLayers（1）;/>
< div id =map_canvasstyle =height：500px; width：600px;><< ; / div>
< div id =status>< / div>
< / body>
< / html>
代码段：
var layers = []; layers [0] = ne w google.maps.KmlLayer（http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml，/*'wrf1.geology.um.maine.edu/bipush/kml/plot_5254。 kml'，原始KML不再可用* / {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'，原始KML不再可用* / {preserveViewport：true}）; var map;函数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 = checkboxid =layer_01onclick =toggleLayers（0）;/> Layer2< input type =checkboxid =layer_02onclick =toggleLayers（1）;/>< div id = map_canvasstyle =height：500px; width：600px;>< / div>< div id =status>< / div>
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>
Please help!
解决方案
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 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>
code snippet:
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>
这篇关于在Google Maps API v3中切换多个KML / KML图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
