我不是一个javascript专家，所以我正在进行的这个项目非常具有挑战性。我已经设法收集了各种代码来创建我的地图，我几乎就在那里，但我被卡住了在homestretch上。
我正在尝试在打开页面时立即获取我正在引用的KML文件。我已经尝试将复选框设置为“已选中”，但这也不起作用。要加载KML，我必须取消选中并重新选中该框。这可能很简单，但我已经尝试了所有我知道的事情。
第二件事是我似乎无法让位置搜索工作。我已经尝试过设置它，但似乎没有回应。
至少，如果有人可以帮我预装KML，那就太大了！
这是代码（页面不在任何地方托管）
<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>
答案 0 :(得分：0)
在初始化功能中，将KML图层添加到地图中，就像检查它们一样。除此之外，由于您已经知道了id图层（在kml json对象中引用它们的值），因此您可以在声明图层变量时简单地引用它们。 （确保在设置地图对象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和kml.b引用全局kml对象中的图层对象。
注意，这对于这个例子是可行的，因为我们知道你的json中只有2个值，我们知道它们是什么。如果您有一个包含多个图层的大kml个对象，请在for ... in循环中运行。
答案 1 :(得分：0)
更改“createTogglers函数”以创建KmlLayers并将其添加到地图中（并选中复选框）：
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;
};
您的“showAddress”功能不存在。一个很好的示例是this example from the documentation中的“codeAddress”函数，尽管您可以将其修改为缩放到推荐的视口，如果这是您想要的。