切换Maps API中的kml图层 [英] Toggle kml layers in Maps API
本文介绍了切换Maps API中的kml图层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我现在尝试添加具有复选框功能的kmls切换功能，以便用户将kmls添加到默认情况下已经加载了几个kmls的地图中.
I am trying to now add the ability to toggle kmls with checkbox options for users to add kmls to a map that already has a couple of kmls loaded by default.
我使用了这些帖子建议，这些建议与该类别的其他帖子有很多共同点，可以扩展到我自己的脚本上-在Google Maps API v3中切换多个KML/KML图层但是以一种非常直接的方式添加它是行不通的.有没有人有什么建议?感谢您的关注.
I used this posts suggestions which has much in common with other posts of this variety to expand on my own script - Toggle multiple KML/KML layers in google maps API v3 But adding it in a pretty straightforward way doesn't work. Does anyone have any suggestions? Thanks for looking.
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script>
// layers to toggle
var layers=[];
layers[0] = new google.maps.KmlLayer('https://example.com/kmz/groundWater_well_2010.kml',
{preserveViewport: true});
layers[1] = new google.maps.KmlLayer('https://example.com/kmz/snowPole_2010.kml',
{preserveViewport: true});
var map;
// end layers to toggle
// intialize
function initialize() {
var myLatlng = new google.maps.LatLng(0,0);
var mapOptions = {
zoom: 1,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
loadKml=function(opts,map){
var layer=new google.maps.KmlLayer();
opts.preserveViewport=true;
if(map){opts.map=map;}
google.maps.event.addListener(layer,'defaultviewport_changed',function(){
var map=this.getMap(),
bounds=map.get('kmlBounds')||this.getDefaultViewport();
bounds.union(this.getDefaultViewport());
map.set('kmlBounds',bounds);
map.fitBounds(bounds);
});
layer.setOptions(opts);
return layer;
}
var sitesLayer = loadKml({
url: 'https://example.com/kmzbasins.kml',
map:map
});
var basinLayer = loadKml({
url: 'https://example.com/kmz/boundries.kml',
map:map
});
// toggle layers at the beginning
function toggleLayers(i,theMap)
{
if(layers[i].getMap()==null) {
layers[i].setMap(theMap);
}
else {
layers[i].setMap(null);
}
document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
}
// end toggle layers
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
然后在我的体内-
<body onload="initialize()">
<div id="map"></div>
Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
推荐答案
您有两个选择:
- 将您的地图变量制作为全局变量(当前在您的Initialize函数本地)，并将toggleLayers函数也设为全局变量(它们必须是全局变量，才能在HTML点击处理程序中使用.)
- 使用google.maps.event.addDomListener将点击侦听器添加到复选框，将所有内容保留在初始化函数的本地.
代码段:
// layers to toggle
var layers = [];
layers[0] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml', {
preserveViewport: true
});
layers[1] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml', {
preserveViewport: true
});
// end layers to toggle
// intialize
function initialize() {
var myLatlng = new google.maps.LatLng(40, -110);
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
loadKml = function(opts, map) {
var layer = new google.maps.KmlLayer();
opts.preserveViewport = true;
if (map) {
opts.map = map;
}
google.maps.event.addListener(layer, 'defaultviewport_changed', function() {
var map = this.getMap(),
bounds = map.get('kmlBounds') || this.getDefaultViewport();
bounds.union(this.getDefaultViewport());
map.set('kmlBounds', bounds);
map.fitBounds(bounds);
});
layer.setOptions(opts);
return layer;
};
function toggleLayers(i) {
if (layers[i].getMap() == null) {
layers[i].setMap(map);
} else {
layers[i].setMap(null);
}
google.maps.event.addListener(layers[i], 'status_changed', function() {
document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
});
}
// end toggle layers
google.maps.event.addDomListener(document.getElementById('layer_01'), 'click', function(evt) {
toggleLayers(0);
});
google.maps.event.addDomListener(document.getElementById('layer_02'), 'click', function(evt) {
toggleLayers(1);
});
// toggle layers at the beginning
toggleLayers(0);
toggleLayers(1);
}
google.maps.event.addDomListener(window, 'load', initialize);body,
html,
#map {
height: 100%;
width: 100%;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
Layer1
<input type="checkbox" id="layer_01" checked="checked" />Layer2
<input type="checkbox" id="layer_02" checked="checked" />
<div id="map"></div>
<div id="status"></div>这篇关于切换Maps API中的kml图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
