如何在Google地图api v3中切换KML/KMZ图层

Question

我正在开发带有Google地图应用程序的网页。目前，我有一个功能搜索栏和地图，显示三个KML/KMZ图层。我需要能够在每个图层之间切换，可以显示其中一个，其中两个或全部三个。 Google地球中有类似的功能，但我需要在Google地图中使用它。我怎样才能做到这一点？

这里是我的地图和搜索栏代码：

<script type="text/javascript"> 
    var geocoder; 
    var map; 
    var marker; 
    function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng (40.43, -74.00); 
    var myOptions = { 
     zoom: 5, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
     marker = new google.maps.Marker({map:map}); 

    var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NY_Radar_data.kmz'); 
     ctaLayer.setMap(map); 
    var ctaLayer = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml'); 
     ctaLayer.setMap(map); 
    var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/OKX_Radar_data%20(1).kmz'); 
     ctaLayer.setMap(map); 
     } 
    function codeAddress() { 
     var address = document.getElementById ("address").value; 
     geocoder.geocode ({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results [0].geometry.location); 
      marker.setPosition(results [0].geometry.location); 
      map.setZoom(14); 
      } 
     else { 
      alert("Geocode was not successful for the following reason: " + status); 
       } 
    }); 
          } 
</script> 

Answer 1

它只是setMap(null)隐藏一个，setMap(map)显现。我保持全局数组变量layers，跟踪哪个层的切换：

var layers = []; 
layers[0] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NY_Radar_data.kmz', 
{preserveViewport: true}); 
     layers[1] = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml', 
{preserveViewport: true}); 
     layers[2] = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/OKX_Radar_data%20(1).kmz', 
{preserveViewport: true}); 

的preserveViewport，用于从选项时所述层切换跳来跳去停止地图。

这里的功能切换：

function toggleLayer(i) { 
    if(layers[i].getMap() === null) { 
    layers[i].setMap(map); 
    } 
    else { 
    layers[i].setMap(null); 
    } 
} 

注意它的使用全局变量。最后是HTML，你可以使用复选框或按钮，甚至一个单选按钮，通过首先设置一个活动层，并在收音机集更新时启用正确的一个。

Large weather <input type="checkbox" id="layer0" onclick="toggleLayer(0)" checked> 
<input type="button" id="layer1" onclick="toggleLayer(1)" value="Racks"> 
Small weather <input type="checkbox" id="layer2" onclick="toggleLayer(2)" checked> 

整个演示是在这里，在地图的左上角控制：http://jsbin.com/irahef/edit#preview