在 Maps API 中切换 kml 图层

Question

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.我现在正在尝试添加使用复选框选项切换 kmls 的功能，以便用户将 kmls 添加到默认情况下已经加载了几个 kmls 的地图。

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.我使用了这个帖子的建议，这些建议与该种类的其他帖子有很多共同点来扩展我自己的脚本 - 在谷歌地图 API v3 中切换多个 KML/KML 图层但是以一种非常简单的方式添加它是行不通的。 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);"/>

Answer 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.将您的地图变量设为全局（它当前是您的 initialize 函数的本地变量），并使 toggleLayers 函数也设为全局（它们需要是全局的才能在 HTML 单击处理程序中使用。

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.使用 google.maps.event.addDomListener 将单击侦听器添加到复选框，将所有内容保留在 initialize 函数的本地。

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>

在 Maps API 中切换 kml 图层

问题描述

1 个解决方案

解决方案1
4 已采纳 2015-07-10 18:57:58

在 Maps API 中切换 kml 图层

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-07-10 18:57:58

解决方案1
4 已采纳 2015-07-10 18:57:58