【发布时间】：2021-11-02 11:05:03
【问题描述】：
我已经实现了一个页面，该页面允许我使用此处描述的解决方案切换各个 KML 层 Toggle KML Layers in Google Maps v3 （谢谢@ericjam！）
这里是代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="icon" href="data:,">
<style>
html, body {
height: 900px;
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100%;
overflow: hidden;
float: left;
border: thin solid #333;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.selected {
font-weight: bold;
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?key=MyAPIkey&callback=initMap&libraries=&v=weekly"
defer>
</script>
<script type="text/javascript">
var map;
// lets define some vars to make things easier later
var kml = {
a: {
name: "MPLS/STPL",
url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
},
b: {
name: "Bicycling Tour Routes",
url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
}
// keep adding more if required
};
// initialize our goo
function initMap() {
var options = {
center: new google.maps.LatLng( 44.9812, -93.2687),
zoom: 13,
scaleControl: true,
//mapTypeId: google.maps.MapTypeId.ROADMAP //default is ROADMAP
}
//set map
map = new google.maps.Map(document.getElementById("map"), options);
createTogglers();
};
google.maps.event.addDomListener(window, 'load', initMap);
// the important function... kml[id].xxxxx refers back to the top
function toggleKML(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(kml[id].url, {
preserveViewport: true,
suppressInfoWindows: false
});
// store kml as obj
kml[id].obj = layer;
kml[id].obj.setMap(map);
}
else {
kml[id].obj.setMap(null);
delete kml[id].obj;
}
};
// create the controls dynamically because it's easier, really
function createTogglers() {
var html = "<form><ul>";
for (var prop in kml) {
html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
" onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
kml[prop].name + "<\/li>";
}
// html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
// "Remove all layers<\/a><\/li>" +
// "<\/ul><\/form>";
html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
"Remove all layers<\/a><\/li>";
html += "<li class='control'><a href='#' onclick='showAll();return false;'>" +
"Show all layers<\/a><\/li>" +
"<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
};
// easy way to remove all objects
function removeAll() {
for (var prop in kml) {
if (kml[prop].obj) {
kml[prop].obj.setMap(null);
delete kml[prop].obj;
}
}
};
// Append Class on Select
function highlight(box, listitem) {
var selected = 'selected';
var normal = 'normal';
document.getElementById(listitem).className = (box.checked ? selected: normal);
};
function startup() {
// for example, this toggles kml b on load and updates the menu selector
var checkit = document.getElementById('b');
checkit.checked = true;
toggleKML(checkit, 'b');
highlight(checkit, 'selector1');
}
</script>
</head>
<body onload="startup()">
<div id="map"></div>
<div id="toggle_box" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; position: absolute; top: 200px; left: 20px; padding: 10px; background: #fff; z-index: 5; ">
</div>
</body>
</html>
这段代码给了我一个看起来像下面截图的页面
原始代码（来自@ericjam）包含一个有用的函数“删除所有层”，当在切换框中单击“删除所有层”时调用该函数。
我想要一个等效的函数，如上图所示“显示所有图层”。
我已阅读有关切换 KML 层的所有帖子，并亲自尝试过，但我是一名业余开发人员。
// easy way to show all objects - MY ADDITION WHICH DOESN'T WORK
function showAll() {
for (var prop in kml) {
if (kml[prop].obj) {
kml[prop].obj.setMap(==null);
display kml[prop].obj;
}
}
};
如有任何建议，我们将不胜感激。
【问题讨论】：
标签： javascript toggle kml layer