在下面的代码中，我尝试create a legend在我的地图上，以便我可以允许用户通过复选框打开/关闭单个KML图层。
由于@geocodezip
，更新后的代码现在正在运行<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<title>KML Layers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script
src="https://maps.googleapis.com/maps/api/js?key=[API-KEY-HERE]">
</script>
</head>
<body>
<div id="map"></div>
<div id="toggle_box"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 41.876,
lng: -87.624
}
});
createTogglers(kml);
removeAll(kml);
startup();
} //End initMap
var kml = {
fubo: {
name: "Fubo TV",
url: 'http://streambuzz.net/wp-content/uploads/fubo.kml'
},
vue: {
name: "Playstation Vue",
url: 'http://streambuzz.net/wp-content/uploads/psvue.kml'
},
hulu: {
name: "Hulu",
url: 'http://streambuzz.net/wp-content/uploads/hulu.kml'
},
dtvnow: {
name: "DIRECTV NOW",
url: 'http://streambuzz.net/wp-content/uploads/dtvnow.kml'
},
yttv: {
name: "YoutTube TV",
url: 'http://streambuzz.net/wp-content/uploads/yttv.kml'
}
}
// 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: true
});
//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(kml) {
var html = "<form><ul>";
for (var prop in kml) {
//console.log(prop);
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(kml);return false;'>" + "Remove all layers<\/a><\/li>" + "<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
}
// easy way to remove all objects
function removeAll(kml) {
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 hulu on load and updates the menu selector
var checkit = document.getElementById('hulu');
checkit.checked = true;
toggleKML(checkit, 'hulu');
highlight(checkit, 'selector-hulu');
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
</body>
</html>
答案 0 :(得分：2)
id =＆＃34; hulu＆＃34;的元素代码试图访问它时不存在。它永远不会由createTogglers创建，该函数接受调用不提供的参数。
createTogglers(kml);
removeAll(kml);
startup();
initMap函数中填充的KmlLayers中的网址与kml对象中的网址不同。
代码段
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 41.876,
lng: -87.624
}
});
createTogglers(kml);
removeAll(kml);
startup();
} //End initMap
var kml = {
fubo: {
name: "Fubo TV",
url: 'http://streambuzz.net/wp-content/uploads/fubo.kml'
},
vue: {
name: "Playstation Vue",
url: 'http://streambuzz.net/wp-content/uploads/psvue.kml'
},
hulu: {
name: "Hulu",
url: 'http://streambuzz.net/wp-content/uploads/hulu.kml'
},
dtvnow: {
name: "DIRECTV NOW",
url: 'http://streambuzz.net/wp-content/uploads/dtvnow.kml'
},
yttv: {
name: "YoutTube TV",
url: 'http://streambuzz.net/wp-content/uploads/yttv.kml'
}
}
// 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: true
});
//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(kml) {
var html = "<form><ul>";
for (var prop in kml) {
//console.log(prop);
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(kml);return false;'>" + "Remove all layers<\/a><\/li>" + "<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
}
// easy way to remove all objects
function removeAll(kml) {
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 hulu on load and updates the menu selector
var checkit = document.getElementById('hulu');
checkit.checked = true;
toggleKML(checkit, 'hulu');
highlight(checkit, 'selector-hulu');
}
google.maps.event.addDomListener(window, "load", initMap);html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: white;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="toggle_box"></div>