在Maps API中切换kml图层kml不再显示

问题描述

我正在用API构建地图，并希望为多个kml文件（类别）切换选择列表，并在其中加载显示所有地图的内容，然后用户可以打开/关闭所需的任意位置。我昨天在this thread和@geocodezip geocodezip的帮助下开始工作。地图正在加载，并且我有复选框，但是kml不再显示，我无法弄清楚。我在下面使用了他的示例xmls，但是昨天我使用了自己的kml。任何帮助将非常感激。谢谢！

$ awk -v x=2 'BEGIN{FS=OFS="|"} {sum+=gensub(/\.(..).*/,"\\1",1,$x)} END{print NR,gensub(/..$/,".&",sum)}' file
8|13.28

<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'),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>

解决方法

工作代码段：

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'),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>

google-maps google-maps-api-3 javascript

在Maps API中切换kml图层kml不再显示

问题描述

解决方法

相关问答