KML 图层无法正确切换，谷歌地图答案

【问题标题】：KML Layer Will Not Toggle Properly, Google MapsKML 图层无法正确切换，谷歌地图
【发布时间】：2012-06-04 19:58:36
【问题描述】：

我正在使用 Google Maps API 和 KML 创建交互式校园地图。我有一张带有地面叠加层和一层 KML 标记的地图。我试图弄清楚如何让 KML 层切换。我目前将其设置为通过复选框进行切换，但仅在您第一次单击复选框时才会关闭。任何后续点击都不会执行任何操作。 KML 层就消失了。我有一种感觉，这可能是一个简单的 javascript 修复程序，但我是 javascript 新手，我无法弄清楚。有人知道我在做什么错吗？提前感谢您的帮助。

这是我所有的代码：

<script type="text/javascript">
  function initialize() {

  var map;
  var omaha = new google.maps.LatLng(41.265437, -95.947405);

  var MY_MAPTYPE_ID = 'blue';

  var stylez = [
    {
      featureType: "all",
      stylers: [
        { hue: "#004A96" },
      ]
    },
    {
      featureType: "all",
      elementType: "labels",
      stylers: [
        { hue: "#000000" },
      ]
    },
        {
      featureType: "road",
      elementType: "local",
      stylers: [
        { hue: "#24356B" },
        { saturation: 55 },
        { lightness: 20 }
      ]
    },
    {
      featureType: "poi.school",
      elementType: "geometry",
      stylers: [
        { hue: "#24356B" },
        { saturation: 55 },
        { lightness: 20 }
      ]
    }
  ];

  var imageBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(41.2599,-95.9601),
      new google.maps.LatLng(41.2718,-95.9367));

  var mapOptions = {
    zoom: 15,
    center: omaha,
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  var styledMapOptions = {
    name: "Blue"
  };

  var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);

  var oldmap = new google.maps.GroundOverlay(
      "http://www.mcography.com/beta/CampusMap.png",
      imageBounds);
  oldmap.setMap(map);

  var kmlLayer01URL = 'http://www.mcography.com/beta/CUADA.kml';
  var kmlOptions = {
            preserveViewport: 1
    };
    kmlLayer01 = new google.maps.KmlLayer(kmlLayer01URL, kmlOptions);
    kmlLayer01.setMap(map); 
    // initially show KML Layer 01
    document.getElementById('show_hide_KML_Layer_01').checked = true; 

}

function toggleKMLLayer01() {
    if (!document.getElementById('show_hide_KML_Layer_01').checked)
      kmlLayer01.setMap(null);
    else
      kmlLayer01.setMap(map); }

</script>
</head>

<body onload="initialize()">

    <p><input type="checkbox" id="show_hide_KML_Layer_01" onclick="toggleKMLLayer01();" />ADA Layer</p> 
    <div id="map_canvas"></div>

</body>

【问题讨论】：

map 在哪里声明？在toggleKMLLayer01 中调用setMap 时是否在范围内？
这是你的意思吗？变量映射； var omaha = new google.maps.LatLng(41.265437, -95.947405); var mapOptions = { zoom: 15, center: omaha, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID] }, mapTypeId: MY_MAPTYPE_ID }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
这部分是我的意思。您可以编辑您的问题以包含它吗？你有一个随机的} 在你的问题中的JS...匹配的{ 在哪里？
当然，我只是将所有代码粘贴进去，以便您查看整个内容。顺便说一句，感谢您的帮助。
没问题！现在您已经显示了map 声明，您可以看到它超出了范围。它仅在 initialize 函数中可用。将var map; 移到initialize 之外，使其处于全局范围内（正如@HeitorChang 在他的回答中提到的那样）。

标签： javascript google-maps-api-3 toggle kml layer

【解决方案1】：

如果没有您的代码的顶部，我不能完全确定，但我的直觉是您需要将 map 变量设为全局变量，否则 toggle 不会将 setMap 变为 map。我写了以下内容，它有效：

  var map;

  function initialize() {
    var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var kmlLayer01URL = 'http://www.mcography.com/beta/CUADA.kml';
    var kmlOptions = {
      preserveViewport: 1
    };
    kmlLayer01 = new google.maps.KmlLayer(kmlLayer01URL, kmlOptions);
    kmlLayer01.setMap(map); 
    // initially show KML Layer 01
    document.getElementById('show_hide_KML_Layer_01').checked = true; 
  }

  function toggleKMLLayer01() {
    if (!document.getElementById('show_hide_KML_Layer_01').checked)
      kmlLayer01.setMap(null);
    else
      kmlLayer01.setMap(map); 
  }

【讨论】：

谢谢@Heitor。为了使地图变量全局化，我只是从它前面删除 var ，对吗？我这样做了，但切换仍然不起作用。
是的，删除 var，但是，你必须在 var map 上面（和外面）initialize 写。它看起来不合适，但需要在那里。
我们可以在同一个 var kmlLayer01URL 中有多个链接吗？
@Nadia 没有关于您的问题的更多详细信息，我只能说您需要一个数组或对象来将多个 URL 存储在同一个变量名下。考虑提出一个新问题，如果它与这个问题无关。