如何使用複選框打開和關閉Google地圖圖層？

我試圖使用複選框將Google地圖的流量，雲和天氣圖層添加到Google地圖中。但是，當我嘗試這樣做時，無論框被選中還是未選中，所有圖層都會消失。我從來沒有在Javascript中做過這樣的事情，而且我對Javascript真的很陌生，所以我不知道我做錯了什麼。這是我的代碼，任何幫助都會很棒！如何使用複選框打開和關閉Google地圖圖層？

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

來源

2013-03-09 kduan

您否則，如果要閱讀as weatherLayer.setMap（null） – Rafe 2013-03-09 15:04:41

哦，是的，我改變了，仍然沒有工作 – kduan 2013-03-09 16:13:54

使用天氣圖層，你需要在全球範圍內的library
啓用和禁用層（其中HTML點擊監聽器運行），你的映射需要是全局的（在任何函數之外定義它，但是在onload事件中初始化它）
您還需要在全局範圍內定義圖層。
顯示層，使用的setMap（地圖），以隱藏它使用的setMap（空）

修改「檢查」功能：

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

來源

2013-03-09 16:17:58 geocodezip

謝謝！儘管我仍然在地圖上遇到了一些問題。如果我在代碼中選中或取消選中框，它將正常運行，但是當我在瀏覽器中點擊複選框時，沒有任何更改。你知道爲什麼發生這種情況嗎？謝謝！ – kduan 2013-03-09 16:58:25

看看我的[工作示例]（http://www.geocodezip.com/v3_simpleMap_layers.html），該工程（至少在Chrome中）。 – geocodezip 2013-03-09 17:05:15

這裏是前一個問題，處理檢查複選框的變化http://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events我也記得我還記得雲覆蓋不會在某個縮放級別下顯示？ – Rafe 2013-03-09 17:08:22

如何使用複選框打開和關閉Google地圖圖層？

回答

相關問題