无法在开始或位置搜索时加载KML文件以在自定义地图中工作

时间:2013-06-14 15:51:49

标签: javascript google-maps google-maps-api-3 kml

我不是一个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>

2 个答案:

答案 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.akml.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”函数,尽管您可以将其修改为缩​​放到推荐的视口,如果这是您想要的。

working example