切换 KML 图层时显示全部功能

Question

我实现了一个页面，允许我使用此处描述的解决方案切换各个 KML 图层 Toggle KML Layers in Google Maps v3 （谢谢@ericjam！）

这是代码

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="icon" href="data:,">
<style>
      html, body {
        height: 900px;
        padding: 0;
        margin: 0;
        }

  #map {
       height: 100%;
       width: 100%;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
  ul {
       list-style-type: none;
       margin: 0;
       padding: 0;
       }
.selected { 
font-weight: bold; 
}
</style>

 
    <script
      src="https://maps.googleapis.com/maps/api/js?key=MyAPIkey&callback=initMap&libraries=&v=weekly"
      defer>
</script>
 
<script type="text/javascript">

var map;

// lets define some vars to make things easier later
var kml = {
    a: {
        name: "MPLS/STPL",
        url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
    },
    b: {
        name: "Bicycling Tour Routes",
        url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
    }
// keep adding more if required 
};

// initialize our goo
function initMap() {
    var options = {
        center: new google.maps.LatLng( 44.9812, -93.2687),
        zoom: 13,
        scaleControl: true,     
//mapTypeId: google.maps.MapTypeId.ROADMAP    //default is ROADMAP
    
}
    
//set map
map = new google.maps.Map(document.getElementById("map"), options);

    createTogglers();
};

google.maps.event.addDomListener(window, 'load', initMap);

// 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: false 
        });
        // 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>";

    html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
    "Remove all layers<\/a><\/li>";

    html += "<li class='control'><a href='#' onclick='showAll();return false;'>" +
    "Show 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('b');
checkit.checked = true;
toggleKML(checkit, 'b');
highlight(checkit, 'selector1');
 }
 

</script>



</head>
<body onload="startup()">

<div id="map"></div>
<div id="toggle_box" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; position: absolute; top: 200px; left: 20px; padding: 10px; background: #fff; z-index: 5; ">
</div>

</body>
</html>

这段代码给我的页面看起来像下面的屏幕截图

Screenshot of above code

原始代码（来自@ericjam）包含一个对 'Remove all layers' 有用的函数，当在切换框中单击 'Remove all layers' 时调用该函数。

我想要一个等效函数，它将 'Show all layers' 如上图所示。

我已经阅读了所有关于切换 KML 图层的帖子并亲自尝试了一下，但我是一名业余开发人员。

// easy way to show all objects - MY ADDITION WHICH DOESN'T WORK
function showAll() {
    for (var prop in kml) {
        if (kml[prop].obj) {
            kml[prop].obj.setMap(==null);
            display kml[prop].obj;
        }
    }
};

如有任何建议，我们将不胜感激。

Answer 1

我的建议是在 kml 对象显示后，使用对 KmlLayer 对象的引用来维护它们。类似于：

function showAll() {
    for (var prop in kml) {
        if (kml[prop].obj) {
            kml[prop].obj.setMap(map);
        }
    }
};

同时修改toggleKML函数不删除对象：

function toggleKML(checked, id) {
    if (checked) {
        var layer = new google.maps.KmlLayer(kml[id].url, {
            preserveViewport: true,
            suppressInfoWindows: false 
        });
        // store kml as obj
        kml[id].obj = layer;
        kml[id].obj.setMap(map);
    } else {
        kml[id].obj.setMap(null);
    }
};

代码片段：

<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <link rel="icon" href="data:,">
  <style>
    html,
    body {
      height: 100%;
      width: 100% padding: 0;
      margin: 0;
    }
    
    #map {
      height: 100%;
      width: 100%;
      overflow: hidden;
      float: left;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .selected {
      font-weight: bold;
    }
  </style>


  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer>
  </script>

  <script type="text/javascript">
    var map;

    // lets define some vars to make things easier later
    var kml = {
      a: {
        name: "MPLS/STPL",
        url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
      },
      b: {
        name: "Bicycling Tour Routes",
        url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
      }
      // keep adding more if required 
    };

    // initialize our google map
    function initMap() {
      var options = {
        center: new google.maps.LatLng(44.9812, -93.2687),
        zoom: 13,
        scaleControl: true,
      }

      //set map
      map = new google.maps.Map(document.getElementById("map"), options);

      createTogglers();
    };

    // 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: false
        });
        // store kml as obj
        kml[id].obj = layer;
        kml[id].obj.setMap(map);
      } else {
        kml[id].obj.setMap(null);
      }

    };

    // 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>";

      html += "<li class='control'><a href='#' onclick='showAll();return false;'>" +
        "Show 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);
        }
      }
    };


    // 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 checkitA = document.getElementById('a');
      checkitA.checked = true;
      var checkitB = document.getElementById('b');
      checkitB.checked = true;
      toggleKML(checkitA, 'a');
      toggleKML(checkitB, 'b');
    }
    // easy way to show all objects - MY ADDITION WHICH DOESN'T WORK
    function showAll() {
      for (var prop in kml) {
        if (kml[prop].obj) {
          kml[prop].obj.setMap(map);
        }
      }
    };
  </script>



</head>

<body onload="startup()">

  <div id="map"></div>
  <div id="toggle_box" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; position: absolute; top: 200px; left: 20px; padding: 10px; background: #fff; z-index: 5; ">
  </div>

</body>

</html>

切换 KML 图层时显示全部功能

ShowAll function when toggling KML layers

javascript

kml

layer

toggle