问题
I'm not a javascript guru, so this project I"m working on has been pretty challenging. I've managed to gather up various bits of code to create my map, and I'm almost there, but am stuck on the homestretch.
I'm trying to get the KML files I'm referencing to load up as soon as the page is opened. I've tried setting the checkboxes to "checked", but that doens't work either. To get the KML to load, I have to uncheck and the re-check the box. It's probably something simple, but I've tried everything I know.
The second thing is I can't seem to get the location search to work. I've tried setting that up, but it doesn't seem to respond.
At the very least, if someone could help me with the KML pre-loading, that would be huge!
Here is the code (page isn't hosted anywhere)
<html>
<head>
<title>Syringa Fiber Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var overlays = [];
var kml = {
a: {
name: "Idaho",
url: "https://dl.dropboxusercontent.com/u/38308425/Idaho%20-%20Current.kml"
},
b: {
name: "Utah",
url: "https://dl.dropboxusercontent.com/u/38308425/Utah%20-%20Current.kml"
},
// keep adding more, the url can be any kml file
};
// initialize our goo
function initializeMap() {
var options = {
center: new google.maps.LatLng(42.85986,-114.741211),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), options);
createTogglers(); // in this example I dynamically create togglers, you can otherwise use jQuery
};
google.maps.event.addDomListener(window, 'load', initializeMap);
// this does all the toggling work, id references the a b names I gave the kml array items
function toggleKML(checked, id) {
if (checked) {
var layer = new google.maps.KmlLayer(kml[id].url, {
preserveViewport: true,
suppressInfoWindows: true
});
kml[id].obj = layer; // turns the layer into an object for reference later
kml[id].obj.setMap(map); // alternative to simply layer.setMap(map)
}
else {
kml[id].obj.setMap(null);
delete kml[id].obj;
}
};
// in this example create the controls dynamically, prop is the id name
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, cycle through the kml array and delete items that exist
function removeAll() {
for (var prop in kml) {
if (kml[prop].obj) {
document.getElementById("selector-" + prop).className = 'normal'; // in normal js, this replaces any existing classname
document.getElementById(prop).checked = false;
kml[prop].obj.setMap(null);
delete kml[prop].obj;
}
}
};
// append class on select, again old school way
function highlight(box, listitem) {
var selected = 'selected';
var unselected = 'normal';
document.getElementById(listitem).className = (box.checked ? selected : unselected);
};
</script>
<style type="text/css">
#toggle_box { position: absolute; top: 100px; right: 30px; padding: 10px; background: #fff; z-index: 5; box-shadow: 0 5px 10px #777 }
ul { margin: 0; padding: 0; font: 100 1em/1em Helvetica; }
ul li { display: block; padding: 10px; margin: 2px 0 0 0; transition: all 100ms ease-in-out 600ms; }
ul li a:link { border: 1px solid #ccc; border-radius: 4px; box-shadow: inset 0 5px 20px #ddd; padding: 10px; font-size: 0.8em; display: block; text-align: center; }
.selected { font-weight: bold; background: #ddd; }
</style>
<style type="text/css">
#back-layer {position:relative;
z-index:1;
}
#middle-layer {position:relative;
z-index:2;
}
#front-layer {position:relative;
z-index:3;
}
</style>
</head>
<body>
<div style="font-weight: bold; font-size: large">Syringa Networks Fiber Map test</div>
<!-- input form that adds the address locator and zoom button -->
<div id="middle-layer" style="position: absolute; top: 75px; left: 40%;">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<input type="text" size="22" name="address" value="Enter address or place..." />
<input type="submit" value="Zoom to it" />
</form>
</div>
<div id="map_canvas" style="position: absolute; top: 70px; left: 0px; width: 100%; height:91%"></div>
<div id="toggle_box"></div>
</body>
</html>
回答1:
In your initialize function add the KML layers to your map as you are when they're being checked. Except, since you already know the id of the layers (the values that reference them in your kml json object) you can simply just reference them when you declare your layer variables. (Make sure the following code comes after your setting your map object map = new google.maps.Map(document.getElementById("map_canvas"), options);).
var layer1 = new google.maps.KmlLayer(kml.a.url, {
preserveViewport: true,
suppressInfoWindows: true
});
var layer2 = new google.maps.KmlLayer(kml.b.url, {
preserveViewport: true,
suppressInfoWindows: true
});
layer1.setMap(map);
layer2.setMap(map);
kml.a and kml.b refer to your layer objects inside your global kml object.
Note, this is feasible for this example because we know there are only 2 values inside your json and we know what they are. If you have a large kml object with many layers run this in a for ... in loop.
回答2:
Change your "createTogglers function to create the KmlLayers and add them to the map (and check the boxes):
function createTogglers() {
var html = "<form><ul>";
for (var prop in kml) {
html += "<li id=\"selector-" + prop + "\"><input type='checkbox' checked='checked' id='" + prop + "'" +
" onclick='highlight(this, \"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
kml[prop].name + "<\/li>";
var layer = new google.maps.KmlLayer(kml[prop].url, {
preserveViewport: true,
suppressInfoWindows: true
});
kml[prop].obj = layer; // turns the layer into an object for reference later
kml[prop].obj.setMap(map); // alternative to simply layer.setMap(map)
}
html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
"Remove all layers<\/a><\/li>" +
"<\/ul><\/form>";
document.getElementById("toggle_box").innerHTML = html;
};
Your "showAddress" function doesn't exist. A good sample for that is the "codeAddress" function in this example from the documentation, although you can modify it to zoom to the recommended viewport, if that is what you want.
working example
来源：https://stackoverflow.com/questions/17112502/cant-get-kml-files-to-load-on-start-or-location-search-to-work-in-custom-map