Question

我现在尝试添加切换带有复选框选项的kmls的功能，以便用户将kmls添加到默认情况下已加载几公里的地图。

我使用这个帖子的建议与这个类别的其他帖子有很多共同点，以扩展我自己的脚本 - Toggle multiple KML/KML layers in google maps API v3 但是以非常简单的方式添加它并不起作用。有没有人有什么建议？谢谢你的期待。

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

 <script>     
    // layers to toggle 

        var layers=[];

    layers[0] = new  google.maps.KmlLayer('https://example.com/kmz/groundWater_well_2010.kml',
    {preserveViewport: true});

    layers[1] = new google.maps.KmlLayer('https://example.com/kmz/snowPole_2010.kml',
    {preserveViewport: true});
    var map;

    // end layers to toggle 
    // intialize 

    function initialize() {
    var myLatlng = new google.maps.LatLng(0,0);
        var mapOptions = {
          zoom: 1,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.SATELLITE
        };


      var map = new google.maps.Map(document.getElementById('map'), mapOptions);

      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; 
      }

      var sitesLayer = loadKml({
        url: 'https://example.com/kmzbasins.kml',
        map:map
      });

      var basinLayer = loadKml({
        url: 'https://example.com/kmz/boundries.kml',
          map:map
      });

      // toggle layers at the beginning

    function toggleLayers(i,theMap)
    {

     if(layers[i].getMap()==null) {
         layers[i].setMap(theMap);
      }
      else {
         layers[i].setMap(null);
    }
      document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>";
    }
    // end toggle layers 

    }

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

        </script>

然后我身体 -

<body onload="initialize()">

    <div id="map"></div>
    Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
    Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>

Answer 1

您有两种选择：

使您的地图变量全局化（它当前是您的初始化函数的本地变量），并使toggleLayers函数也是全局的（它们需要是全局的才能在HTML点击处理程序中使用。

proof of concept fiddle

使用google.maps.event.addDomListener将单击侦听器添加到复选框，将每个内容保留在初始化函数的本地。

proof of concept fiddle

代码段

＆＃13;

// layers to toggle 
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 myLatlng = new google.maps.LatLng(40, -110);
  var mapOptions = {
    zoom: 5,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  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);

＆＃13;

body,
html,
#map {
  height: 100%;
  width: 100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
Layer1
<input type="checkbox" id="layer_01" checked="checked" />Layer2
<input type="checkbox" id="layer_02" checked="checked" />
<div id="map"></div>
<div id="status"></div>

＆＃13;

在Maps API中切换kml图层

1 个答案: