谷歌地图v3
Toggling Weather Layers in Google Maps 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。谢谢你的帮助!
是否包含天气库?这个代码对我有效:
<!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>
工作示例
相关文章:
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 标记的实时更新,无需加载页面谷歌地图API V3
- 谷歌地图v3标记没有显示ie8和9
- 谷歌地图停止显示点v3
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 如何在多承诺链中处理谷歌地图API V3事件
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市)
- 谷歌地图v3:当函数'失败'呼叫
- 谷歌地图V3
- 谷歌地图V3-我无法调和关闭
- 如何在谷歌地图api v3中获得无公里驾驶距离
- 谷歌地图API v3:处理使用限制限制
- 在谷歌地图V3上选择多边形
- markrimage在谷歌地图api v3中的特定位置后消失
- 谷歌地图API JS V3包含但不起作用
- 谷歌地图v3侦听器(单击)-更改URL
- 如何限制谷歌地图API V3半径搜索仅限于圆圈内的标记
- 将 v2 更新到 v3 谷歌地图 API 未加载
- Javascript v3谷歌地图旋转地图