Javascript 如何在Google Maps api v3中的KML/KMZ层之间切换

我正在开发一个带有谷歌地图应用程序的网页。目前，我有一个功能搜索栏和地图，显示三个KML/KMZ层。我需要能够在每一层之间切换，或者显示其中一层、两层或者全部三层。Google Earth中也有类似的功能，但我需要在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>

只需setMapnull隐藏一个，setMapmap显示一个。我保留一个全局数组变量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});

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

切换图层时，“保留视口”选项可阻止贴图四处跳跃

以下是切换的功能：

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

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>

整个演示在这里，控件位于地图的左上角：

只需设置MapNull来隐藏一个，设置MapMap来显示。我保留一个全局数组变量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});

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

切换图层时，“保留视口”选项可阻止贴图四处跳跃

以下是切换的功能：

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

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>

---

整个演示在这里，地图左上角的控件：

Heiter的答案很好，但对jsbin示例中的代码进行了一点补充，如果您想在初始化时取消显示层，则需要更改

layers[i].setMap(map);

到

---

然后确保您的复选框未选中

Heiter的回答很好，但是对jsbin示例中的代码做了一点补充，如果您想在初始化时不显示层，则需要更改

layers[i].setMap(map);

到

---

然后确保您的复选框未选中

我尝试了Heitor上面发布的代码，注意到点击图层的打开和关闭会改变图层在地图上的显示顺序。我实现这个解决方案是为了保持层的顺序，但它可能有点低效。如果有人有任何建议，请分享

功能切换{ var j； 对于j=0；j} 我尝试了上面Heitor发布的代码，并注意到点击图层打开和关闭会改变图层在地图上的显示顺序。我实现这个解决方案是为了保持层的顺序，但它可能有点低效。如果有人有任何建议，请分享

功能切换{ var j； 对于j=0；j}非常感谢你，海特，这非常有用。还有什么其他的输入类型？你刚刚制作了那个网页吗？它很容易理解和使用。这是一个页面，您可以搜索表单输入。我唯一错过的另一种是标签，它创建下拉列表和多选框。是的，我根据您提供的代码编写了答案，我确实保留了模板。@HeitorChang感谢您的答案，今天帮了我很多忙谢谢您非常感谢Heiter，这非常有用。还有什么其他的输入类型？你刚刚制作了那个网页吗？它很容易理解和使用。这是一个页面，您可以搜索表单输入。我唯一错过的另一种是标签，它创建下拉列表和多选框。是的，我根据你提供的代码写了答案，我确实保留了模板。@HeitorChang谢谢你的答案，今天帮了我很多忙