以下代码存在一些问题。
完美无瑕但我会在“点击”时向制作人展示KML文件中的联想传奇......
我想要一个通用命令，因为标记可以超过500 ...
任何帮助？
网址：http://tequila357.wix.com/test-projet#!map/c161y
由于
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
// lets define some vars to make things easier later
var kml = {
a: {
name: "MAP BELGIUM",
url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24e3bd5bbd990f5d"
},
b: {
name: "GARDIENNES",
url: "https://maps.google.be/maps/ms?authuser=0&vps=3&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d21a429f0f00d5400"
},
c: {
name: "CRECHES",
url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d22900ca6b246c6a1"
},
d: {
name: "CRECHES PRIV",
url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24cf21e2a254a10c"
},
e: {
name: "MAGASINS STORES",
url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24db929a46bae78c"
},
f: {
name: "BABYSITTERS",
url: "https://maps.google.be/maps/ms?authuser=0&vps=2&hl=fr&ie=UTF8&msa=0&output=kml&msid=208899208399411894595.0004d24dba905263481df"
},
// keep adding more if ye like
};
// initialize our goo
function initializeMap() {
var options = {
center: new google.maps.LatLng(50.5812, 4.5687),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), options);
createTogglers();
};
google.maps.event.addDomListener(window, 'load', initializeMap);
// 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('a');
checkit.checked = true;
toggleKML(checkit, 'a');
highlight(checkit, 'selector1');
}
// test legen
google.maps.event.addListener(map, 'click', function(event) {
marker = new google.maps.Marker({position: event.latLng, map: map});
});
// end legend
</script>
<style type="text/css">
.selected { font-weight: bold; }
</style>
</head>
<body onload="startup()">
<div id="map_canvas" style="width: 100%; height: 700px;"></div>
<div id="toggle_box" style="position: absolute; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 5; "></div>
</body>
</html>