我对JavaScript和Google Maps API(基本上是Web GIS的整个世界)都很陌生,我正在努力为几个KML图层创建交互式图例(在这个例子中,只有两个)或类似这样的http://www.strahlen.org/map/central.htm但是对于KML层。
这是我的代码:
<script>
var tocka = new google.maps.LatLng(46.150346, 15.863571);
function initialize() {
var neven = {
center: tocka,
zoom: 15,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("googleMap"), neven);
var ctaLayer = new google.maps.KmlLayer({
url: 'https://dl.dropboxusercontent.com/u/126827789/kuce.kmz'
});
ctaLayer.setMap(map);
var ctaLayer = new google.maps.KmlLayer({
url: 'https://dl.dropboxusercontent.com/u/126827789/neven.kmz'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
那么..如果可能的话,我想添加一些复选框来在这两个kml文件之间切换?
欢迎任何帮助和建议。提前谢谢你,Neven。
所以你并没有真正要求关于地图内容的传说,只是一个切换选项。我从另一个问题(Toggle KML Layers in Google Maps v3)得到了这个答案,但我清理了它,因为它最初不适合我。它现在运作良好。这是我的一个:
// Define the kml layers
var kml = {
a: {
name: "Elevation Contours",
url:'https://website.com/id/LimaContours200.kml'},
b: {
name: "Districts",
url: 'https://https://website.com/id/LimaDistricts.kml'},
c:{
name: "CAPECO Zones",
url: 'https://website.com/id/ZonasCapeco.kml'}}
function initialize(){
var mapOptions ={
zoom: 12,
center: new google.maps.LatLng(-12.0456072,-76.9991801),
mapTypeId: google.maps.MapTypeId.SATELLITE,};
//Display the map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
createTogglers();
removeAll();
startup();};
// 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() {
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>";
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, 'selector-b');}