在地图 API 中切换 kml 图层（不再显示 kml）

Question

I am building a map in API and want a toggle clecklist for multiple kml files (categories) where the map loads displaying all, and then user can toggle on/off whichever they want.我正在 API 中构建一个 map 并想要一个用于多个 kml 文件（类别）的切换清单，其中 map 加载显示所有内容，然后用户可以切换/关闭。 I got it to work yesterday with the help of this thread and @geocodezip geocodezip .我昨天在这个线程和@geocodezip geocodezip的帮助下让它工作了。 The map is loading and I have checkboxes but the kml is not displaying anymore and I can't figure it out. map 正在加载，我有复选框，但 kml 不再显示，我无法弄清楚。 I've used his example xmls below but yesterday I had it working with my own kml.我在下面使用了他的示例 xmls，但昨天我让它与我自己的 kml 一起使用。 Any help would be much appreciated.任何帮助将非常感激。 Thanks!谢谢！

 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> <script type="text/javascript"> var layers = []; layers[0] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml', { preserveViewport: true }); layers[1] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml', { preserveViewport: true }); // end layers to toggle // intialize function initialize() { var latlng = new google.maps.LatLng(47.601987, -122.333624); var myOptions = { mapId: "f36e677014a7abf2", zoom: 16, center: latlng, mapTypeControl: false, streetViewControl: false, mapTypeIds: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); loadKml = function(opts, map) { var layer = new google.maps.KmlLayer(); opts.preserveViewport = true; if (map) { opts.map = map; } google.maps.event.addListener(layer, 'defaultviewport_changed', function() { var map = this.getMap(), bounds = map.get('kmlBounds') || this.getDefaultViewport(); bounds.union(this.getDefaultViewport()); map.set('kmlBounds', bounds); map.fitBounds(bounds); }); layer.setOptions(opts); return layer; }; function toggleLayers(i) { if (layers[i].getMap() == null) { layers[i].setMap(map); } else { layers[i].setMap(null); } google.maps.event.addListener(layers[i], 'status_changed', function() { document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>"; }); } // end toggle layers google.maps.event.addDomListener(document.getElementById('layer_01'), 'click', function(evt) { toggleLayers(0); }); google.maps.event.addDomListener(document.getElementById('layer_02'), 'click', function(evt) { toggleLayers(1); }); // toggle layers at the beginning toggleLayers(0); toggleLayers(1); } google.maps.event.addDomListener(window, 'load', initialize); </script>

 <style> #map_canvas {width: 100%; height: 1000px; margin: 0px; padding: 0px;} #check_boxes {margin: auto; width: 50%; padding: 25px; text-align: center; } </style>

 <html> <body onload="initialize()"> <div id="check_boxes"> <b>SHOPPING</b> <input type="checkbox" id="layer_01" checked="checked"/> <b>DINING</b> <input type="checkbox" id="layer_02" checked="checked" /></div> <div id="map_canvas"></div> </body> </html>

EDIT:编辑：

This is what I am posting into my page and the checkbox displays but no map at all:这就是我在我的页面上发布的内容，复选框显示，但根本没有 map：

<html>

<head>

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#map_canvas {
  width: 100%;
  height: 90%;
  margin: 0px;
  padding: 0px;
}

#check_boxes {
  margin: auto;
  width: 50%;
  padding: 25px;
  text-align: center;
}
</style>

<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDEG25mWrlEMJMLAeqPwEPGsPL6_tfxe0w&v=weekly&callback=InitMap&libraries=&v=beta&map_ids=f36e677014a7abf2">
</script>

<script>    

var layers = [];

layers[0] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml', {
  preserveViewport: true
});

layers[1] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml', {
  preserveViewport: true
});

// end layers to toggle 
// intialize 
var map;

function initialize() {
  console.log("initialize");
  var latlng = new google.maps.LatLng(40.601987, -100.333624);
  var myOptions = {
    mapId: "f36e677014a7abf2",
    zoom: 5,
    center: latlng,
    mapTypeControl: false,
    streetViewControl: false,
    mapTypeIds: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  loadKml = function(opts, map) {
    var layer = new google.maps.KmlLayer();
    opts.preserveViewport = true;
    if (map) {
      opts.map = map;
    }

    google.maps.event.addListener(layer, 'defaultviewport_changed', function() {
      var map = this.getMap(),
        bounds = map.get('kmlBounds') || this.getDefaultViewport();

      bounds.union(this.getDefaultViewport());
      map.set('kmlBounds', bounds);
      map.fitBounds(bounds);
    });
    layer.setOptions(opts);
    return layer;
  };

  function toggleLayers(i) {
    console.log("toggleLayers(" + i + ")");
    if (layers[i].getMap() == null) {
      layers[i].setMap(map);
    } else {
      layers[i].setMap(null);
    }
    google.maps.event.addListener(layers[i], 'status_changed', function() {
      document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
    });
  }
  // end toggle layers
  google.maps.event.addDomListener(document.getElementById('layer_01'), 'click', function(evt) {
    toggleLayers(0);
  });
  google.maps.event.addDomListener(document.getElementById('layer_02'), 'click', function(evt) {
    toggleLayers(1);
  });
  // toggle layers at the beginning
  toggleLayers(0);
  toggleLayers(1);
}

google.maps.event.addDomListener(window, 'load', initialize);</script>
</head>

<body>
  <div id="check_boxes">
    <b>SHOPPING</b> <input type="checkbox" id="layer_01" checked="checked" />
    <b>DINING</b> <input type="checkbox" id="layer_02" checked="checked" /></div>
  <div id="map_canvas"></div>
  <div id="status"></div>
</body>

</html>

Answer 1

Working code snippet:工作代码片段：

 var layers = []; layers[0] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml', { preserveViewport: true }); layers[1] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml', { preserveViewport: true }); // end layers to toggle // intialize var map; function initialize() { console.log("initialize"); var latlng = new google.maps.LatLng(40.601987, -100.333624); var myOptions = { mapId: "f36e677014a7abf2", zoom: 5, center: latlng, mapTypeControl: false, streetViewControl: false, mapTypeIds: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); loadKml = function(opts, map) { var layer = new google.maps.KmlLayer(); opts.preserveViewport = true; if (map) { opts.map = map; } google.maps.event.addListener(layer, 'defaultviewport_changed', function() { var map = this.getMap(), bounds = map.get('kmlBounds') || this.getDefaultViewport(); bounds.union(this.getDefaultViewport()); map.set('kmlBounds', bounds); map.fitBounds(bounds); }); layer.setOptions(opts); return layer; }; function toggleLayers(i) { console.log("toggleLayers(" + i + ")"); if (layers[i].getMap() == null) { layers[i].setMap(map); } else { layers[i].setMap(null); } google.maps.event.addListener(layers[i], 'status_changed', function() { document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>"; }); } // end toggle layers google.maps.event.addDomListener(document.getElementById('layer_01'), 'click', function(evt) { toggleLayers(0); }); google.maps.event.addDomListener(document.getElementById('layer_02'), 'click', function(evt) { toggleLayers(1); }); // toggle layers at the beginning toggleLayers(0); toggleLayers(1); } google.maps.event.addDomListener(window, 'load', initialize);

 html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } #map_canvas { width: 100%; height: 90%; margin: 0px; padding: 0px; } #check_boxes { margin: auto; width: 50%; padding: 25px; text-align: center; }

 <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"> </script> </head> <body> <div id="check_boxes"> <b>SHOPPING</b> <input type="checkbox" id="layer_01" checked="checked" /> <b>DINING</b> <input type="checkbox" id="layer_02" checked="checked" /></div> <div id="status"></div> <div id="map_canvas"></div> </body> </html>

在地图 API 中切换 kml 图层（不再显示 kml）

问题描述

1 个解决方案

解决方案1
0 2020-08-12 01:30:47

在地图 API 中切换 kml 图层（不再显示 kml）

问题描述

1 个解决方案

解决方案1 0 2020-08-12 01:30:47

解决方案1
0 2020-08-12 01:30:47