Google创建用于打开/关闭KML层的示例
Google创建用于打开/关闭KML层的示例
提问于 2018-02-23 17:14:07
在下面的代码中，我试图在地图上设置创造一个传奇，以便允许用户通过复选框打开/关闭各个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>Stack Overflow用户
回答已采纳
发布于 2018-02-23 21:26:46
当代码试图访问该元素时，id="hulu“元素不存在。它从来不是由createTogglers创建的，该函数接受一个调用没有提供的参数。
createTogglers(kml);
removeAll(kml);
startup(); KmlLayers中填充在initMap函数中的URL与kml对象中的URL不同。
概念小提琴的证明
代码片段：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48953026
复制相关文章
相似问题
腾讯云开发者
