0

我不是 javascript 专家，所以我正在从事的这个项目非常具有挑战性。我已经设法收集了各种代码来创建我的地图，而且我快到了，但我陷入了困境.

我正在尝试在打开页面后立即加载我引用的 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>
4

2 回答 2

0

在您的初始化函数中，将 KML 图层添加到您的地图中，就像检查它们时一样。除了，因为你已经知道id层（在你的kmljson 对象中引用它们的值），你可以在声明层变量时简单地引用它们。（确保在您设置地图对象之后出现以下代码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循环中运行它。

于 2013-06-14T16:21:12.533 回答
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”功能不存在。一个很好的示例是文档中此示例中的“codeAddress”函数，尽管您可以修改它以缩放到推荐的视口，如果这是您想要的。

工作示例

于 2013-06-14T22:37:24.887 回答