gpt4 book ai didi

javascript - 在 Google map v3 中切换天气层

转载 作者:行者123 更新时间:2023-11-30 06:26:56 25 4
gpt4 key购买 nike

我已经查看了与我的问题类似的其他问题的答案,但我仍然无法让我的代码正常工作。现在,我只是想为 map 上的天气层添加一个打开/关闭按钮。但是,当我单击按钮时没有任何反应,而且我不确定我哪里出错了。

 <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。感谢您的帮助!

最佳答案

您是否包括 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

关于javascript - 在 Google map v3 中切换天气层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20529775/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com