KML圖層無法正常切換，谷歌地圖

Question

我正在使用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>

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

KML圖層無法正常切換，谷歌地圖

問題描述

1 個解決方案

解決方案1
2 已采納 2012-05-30 15:02:26

KML圖層無法正常切換，谷歌地圖

問題描述

1 個解決方案

解決方案1 2 已采納 2012-05-30 15:02:26

解決方案1
2 已采納 2012-05-30 15:02:26