Jak włączać i wyłączać warstwy map Google za pomocą pól wyboru?

Question

Próbuję dodać do map Google warianty ruchu, chmur i pogody na podstawie pól wyboru. Jednak gdy próbuję to zrobić, wszystkie warstwy znikają bez względu na to, czy pola zostały zaznaczone czy odznaczone. Nigdy nie robiłem czegoś takiego w JavaScript i jestem naprawdę nowy w JavaScript, więc nie mam pojęcia, co robię źle. Oto mój kod, każda pomoc będzie świetna!

Javascript:

 function check() 
    { 
     var weatherLayer = new google.maps.weather.WeatherLayer({ 
     temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 
     }); 
     var trafficLayer = new google.maps.TrafficLayer(); 
     var cloudLayer = new google.maps.weather.CloudLayer(); 

     if(document.getElementById('weather').checked) 

     {weatherLayer.setMap(map);} 

     else if(!document.getElementById('weather').checked) 

     {weatherLayer.setMap(map);} 

     cloudLayer.setMap(map); 

     trafficLayer.setMap(map); 
    } 

Html

 <label><input type="checkbox" id="weather" checked="checked" onclick="check()" />Weather</label> 
     <label><input type="checkbox" id="clouds" onclick="check()" />Clouds</label> 
     <label><input type="checkbox" id="traffic" onclick="check()" />Traffic</label> 

Answer 1

1. użyć warstwę pogody trzeba zawierać library
2. włączanie i wyłączanie warstw w zasięgu globalnym (gdzie HTML kliknięcie słuchacze działają), twoja mapa musi być globalna (zdefiniuj ją poza dowolnymi funkcjami, ale zainicjuj ją w zdarzeniu onload).
3. musisz również zdefiniować swoje warstwy w zasięgu globalnym.
4. , aby wyświetlić warstwę, stosowanie setMap (MAP), aby ukryć go używać setMap (null)

zmodyfikowany "sprawdzić" Funkcja:

function check() 
{ 

    if(document.getElementById('weather').checked) 

     {weatherLayer.setMap(map);} 

    else 

     {weatherLayer.setMap(null);} 

    if(document.getElementById('clouds').checked) 

     {cloudLayer.setMap(map);} 

    else 

     {cloudLayer.setMap(null);} 

    if(document.getElementById('traffic').checked) 

     {trafficLayer.setMap(map);} 

    else 

     {trafficLayer.setMap(null);} 
} 

working example