Слой KML не переключается должным образом, Карты Google

Я создаю интерактивную карту кампуса с помощью 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>

javascript toggle google-maps-api-3 layer kml
person mcography    schedule 30.05.2012    source источник
comment
Где объявлено map? Это в рамках, когда вы вызываете setMap в toggleKMLLayer01?   -  person James Allardice    schedule 30.05.2012
comment
Это то, что вы имеете в виду? вар карта; var omaha = новый 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 = новый google.maps.Map(document.getElementById(map_canvas), mapOptions);   -  person mcography    schedule 30.05.2012
comment
Это отчасти то, что я имею в виду. Можете ли вы отредактировать свой вопрос, чтобы включить это? У вас есть случайный } на полпути к JS в вашем вопросе... где соответствующий {?   -  person James Allardice    schedule 30.05.2012
comment
Конечно, я просто вставил весь код, чтобы вы могли посмотреть на него целиком. Кстати, спасибо за помощь.   -  person mcography    schedule 30.05.2012
comment
Без проблем! Теперь, когда вы показали объявление map, вы можете видеть, что оно выходит за рамки. Он доступен только внутри функции initialize. Переместите var map; за пределы initialize, чтобы он попал в глобальную область (как упоминает @HeitorChang в его ответе).   -  person James Allardice    schedule 30.05.2012
comment
Большое спасибо @James! Оно работает! Эти форумы прекрасны.   -  person mcography    schedule 30.05.2012
comment
Не за что, рад, что смог помочь :)   -  person James Allardice    schedule 30.05.2012

Ответы (1)


arrow_upward
2
arrow_downward

Без верхней части вашего кода я не могу быть полностью уверен, но я подозреваю, что вам нужно сделать переменную 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); 
  }
person Heitor Chang    schedule 30.05.2012
comment
Спасибо @Heitor. Чтобы сделать переменную карты глобальной, я просто удаляю перед ней переменную var, правильно? Я сделал это, и переключение все еще не работает. - person mcography; 30.05.2012
comment
Да, удалите переменную, но также вы должны написать var map над (и снаружи) initialize. Это выглядит неуместно, но должно быть там. - person Heitor Chang; 30.05.2012
comment
можем ли мы иметь несколько ссылок внутри одного и того же var kmlLayer01URL? - person Nadia; 08.07.2021
comment
@Nadia Надя без подробностей о вашей проблеме, я могу только сказать, что вам нужен либо массив, либо объект для хранения нескольких URL-адресов под одним и тем же именем переменной. рассмотрите возможность задать новый вопрос, если он не связан с этим. - person Heitor Chang; 08.07.2021