无法将KML文件加载到开始或位置搜索以在自定义地图中工作 [英] Can't get KML files to load on start or location search to work in custom map
本文介绍了无法将KML文件加载到开始或位置搜索以在自定义地图中工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不是一个JavaScript大师，所以我正在开发的这个项目非常具有挑战性，我已经设法收集各种代码来创建我的地图，而且我几乎在那里，但是卡住了在最后一页。
我试图获取我引用的KML文件，一旦页面打开就加载。我试过设置复选框为了让KML加载，我必须取消选中并重新选中框，这可能很简单，但我已经尝试了我所知道的一切。
第二件事是我似乎无法获得位置搜索的功能，我试着设置它，但似乎没有回应。
至少，如果有人能够帮助我进行KML预加载，那将是巨大的！
这里是代码（页面不在任何地方）
< html>
< head>
< ;标题>丁香纤维图< / title>
< script type =text / javascriptsrc =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：{
名称：犹他州，
网址：https://dl.dropboxusercontent.com/u/38308425/Utah%20 - ％20Current.kml
}，
//继续添加更多，url可以是任何kml文件
};
//初始化我们的goo
函数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（）; //在这个例子中，我动态创建切换器，否则可以使用jQuery
};
google.maps.event.addDomListener（window，'load'，initializeMap）;
//这是做所有的切换工作，id引用我给的kml数组项目的ab名称
函数toggleKML（checked，id）{
if（checked）{
var layer = new google.maps.KmlLayer（kml [id] .url，{
preserveViewport：true，
suppressInfoWindows：true
}）;
kml [id] .obj = layer; //将图层转换为对象以供后来参考
kml [id] .obj.setMap（map）; //替代简单的layer.setMap（map）
}
else {
kml [id] .obj.setMap（null）;
删除kml [id] .obj;
}
};
//在此示例中动态创建控件，prop是id名称
函数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;'> +
移除所有图层< \ / a>< \ / li> +
< \ / ul>< \ / form>;
document.getElementById（toggle_box）。innerHTML = html;
};
//简单的方法是删除所有对象，循环访问kml数组并删除存在的元素
function removeAll（）{
for（var prop in kml）{
if（kml [prop] .obj）{
document.getElementById（selector-+ prop）.className ='normal'; //在普通的js中，这将替换任何现有的类名
document.getElementById（prop）.checked = false;
kml [prop] .obj.setMap（null）;
删除kml [prop] .obj;
}
}
};
//在select，old school方式上追加类class
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;填充：10px;背景：#fff; z-index：5; box-shadow：0 5px 10px＃777}
ul {margin：0;填充：0;字体：100 1em / 1em Helvetica; }
ul li {display：block;填充：10px; margin：2px 0 0 0;过渡：全部100ms缓出600ms; }
ul li a：link {border：1px solid #ccc; border-radius：4px; box-shadow：inset 0 5px 20px #ddd;填充：10px; font-size：0.8em;显示：块; text-align：center; }
.selected {font-weight：bold;背景：#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光纤映射测试< / div>
<！ - 输入表单，添加地址定位器和缩放按钮 - >
< div id =middle-layerstyle =position：absolute; top：75px; left：40％;>
< form action =＃onsubmit =showAddress（this.address.value）; return false>
< input type =submitvalue =Zoom to it/>
< / form>
< / div>
< div id =map_canvasstyle =position：absolute; top：70px; left：0px; width：100％; height：91％>< / div>
< div id =toggle_box>< / div>
< / body>
< / html>
解决方案
更改您的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 =新的google.maps.KmlLayer（kml [prop] .url，{
preserveViewport：true，
suppressInfoWindows：true
}）;
kml [道具]。 obj = layer; //将图层转换为对象以供后来参考
kml [prop] .obj.setMap（map）; //替代简单layer.setMap（map）
}
html + =< li class ='control'>< a href ='＃'onclick ='removeAll（）; return false;'>+
删除所有图层< ; \ / a>< \ / li>+
< \ / ul>< \ / form>;
document.getElementById（toggle_box ）.innerHTML = html;
};
你的showAddress函数不存在，一个很好的例子是这个例子来自文档，尽管你可以修改它以放大到推荐的视口，如果这是你想要的。
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>
解决方案
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.
这篇关于无法将KML文件加载到开始或位置搜索以在自定义地图中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
