Toggle kml layers in Maps API

问题

I am trying to now add the ability to toggle kmls with checkbox options for users to add kmls to a map that already has a couple of kmls loaded by default.

I used this posts suggestions which has much in common with other posts of this variety to expand on my own script - Toggle multiple KML/KML layers in google maps API v3 But adding it in a pretty straightforward way doesn't work. Does anyone have any suggestions? Thanks for looking.

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

Then in the body I have-

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

回答1:

You have two options:

Maker your map variable global (it is currently local to your initialize function), and make the toggleLayers function global as well (they need to be global to be used in HTML click handlers.

proof of concept fiddle

Use the google.maps.event.addDomListener to add click listeners to the check boxes, keep every thing local to the initialize function.

proof of concept fiddle

code snippet:

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

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

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

来源：https://stackoverflow.com/questions/31348218/toggle-kml-layers-in-maps-api

标签

javascript

google-maps

google-maps-api-3