在谷歌地圖v3中切換天氣圖層

我已經瀏覽了類似於我的其他問題的答案，但我仍然無法讓我的代碼正常工作。現在，我只是想爲地圖上的天氣圖層添加一個開/關按鈕。然而，當我點擊按鈕時沒有任何反應，而且我不確定我要出錯的地方。在谷歌地圖v3中切換天氣圖層

<script type="text/javascript"> 
// Declaring the map as a global variable 
var map; 

function initialize() { 
    var latlng = new google.maps.LatLng(27.7428, -97.4019); 
    var weatherOn = false; //starts off false because the weather layer is not on by default 

    // Setting up the map options 
    var mapOptions = { 
     center: latlng, 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     backgroundColor:'#c0c0c0', 
     draggableCursor: 'pointer', 
     draggingCursor: 'crosshair' 
     }; 

    // Assigning map to its variable 
    map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    var weatherLayer = new google.maps.weather.WeatherLayer({ 
     temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 
    }); 
    // weatherLayer.setMap(map); 

    // Setting a listener that will toggle the weather layer 
    google.maps.event.addDomListener(document.getElementById("weatherToggle"), 'click', function() { 
     if (weatherOn == true) { 
      weatherLayer.setMap(null); 
      weatherOn = false; 
     } 
     else { 
      weatherLayer.setMap(map); 
      weatherOn = true; 
     } 
    }); 
}; 
</script>

weatherToggle是我在頁面上創建的按鈕的ID。謝謝您的幫助！

來源

2013-12-11 jbri

您是否包含weather library？此代碼的工作對我來說：

<!DOCTYPE html> 
<html> 
    <head> 
<title>Google Maps</title> 
     <style type="text/css"> 
html, body, #map-canvas { 
    width: 100%; 
    height: 500px; 
    margin: 0px; 
    padding: 0px 
} 
    </style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=weather"> 
    </script> 
<script type="text/javascript"> 
// Declaring the map as a global variable 
var map; 

function initialize() { 
    var latlng = new google.maps.LatLng(27.7428, -97.4019); 
    var weatherOn = false; //starts off false because the weather layer is not on by default 

    // Setting up the map options 
    var mapOptions = { 
     center: latlng, 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     backgroundColor:'#c0c0c0', 
     draggableCursor: 'pointer', 
     draggingCursor: 'crosshair' 
     }; 

    // Assigning map to its variable 
    map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    var weatherLayer = new google.maps.weather.WeatherLayer({ 
     temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 
    }); 
    // weatherLayer.setMap(map); 

    // Setting a listener that will toggle the weather layer 
    google.maps.event.addDomListener(document.getElementById("weatherToggle"), 'click', function() { 
     if (weatherLayer.getMap() != null) { 
      weatherLayer.setMap(null); 
     } 
     else { 
      weatherLayer.setMap(map); 
     } 
    }); 
}; 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
    <body> 
<input type="button" id="weatherToggle" value="toggle"></input> 
<div id="map-canvas"></div> 
    </body> 
</html>

working example

來源

2013-12-11 21:17:08 geocodezip

啊，太感謝你了！這是我第一次搞天氣層，所以我沒有意識到有一個圖書館可以參考。 – jbri

在谷歌地圖v3中切換天氣圖層

回答

相關問題