如何在Google Maps API v3中的KML / KMZ图层之间切换 [英] How to toggle between KML/KMZ layers in Google Maps api v3

问题描述

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

I'm developing a web page with a Google maps application. Currently, I have a functional search bar and map that displays three KML/KMZ layers. I need to be able to toggle between each of the layers, either display one of them, two of them or all three. There is a similar function in Google Earth, but I need it in Google Maps. How can I do this?

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

Here is my code for the map and search bar:

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

推荐答案

简单地说就是 setMap（null ）隐藏一个， setMap（map）来显示。我保留一个全局数组变量 layers ，以跟踪哪一层切换：

It's simply setMap(null) to hide one, setMap(map) to show. I keep a global array variable layers, to keep track of which layer to toggle:

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选项可在地图切换时阻止地图跳跃。

The preserveViewport option stops the map from jumping around when the layers are toggled.

以下是切换的功能：

Here's the function to toggle:

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

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

Note it's using the global variable. Finally the HTML, you can use checkboxes or buttons, and even a radio button by setting only one active layer at first and enabling the right one when the radio set is updated.

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

The whole demo is here, controls on top left of map: http://jsbin.com/irahef/edit#preview

这篇关于如何在Google Maps API v3中的KML / KMZ图层之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！