前端获取地区的天气状况

翻阅了大量的帖子，在赛选了很多废的帖子之后找到了两个总体来说还不错的

一：配置高德地图

高德地图的查看天气的话，是每天免费100次

先访问高德官网：高德控制台，注册后申请应用，获取key值。

这个key值可以通用高德提供的所有服务接口，比如定位、天气、路线规划、关键字搜索等。

访问接口

1、具体接口文档如下：

定位接口：IP定位-API文档| 高德地图API

天气预报接口：天气查询-API文档 | 高德地图API

<script>
			var xhr = new XMLHttpRequest;
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {
					console.log(xhr.responseText)
				}
			}
			xhr.open('get','https://restapi.amap.com/v3/weather/weatherInfo?key="自己申请的高德地图的key"&city=要查询的城市',true)
			xhr.send()
		</script>

返回的数据

一：配置和风天气

和风天气的查看天气的话，是每天免费1000次

和风天气也有对应的图标库，我感觉这一点是非常不错的

先访问和风天气：和风天气，注册后申请应用，获取key值。

访问接口

1、具体接口文档如下：

 天气预报接口：天气查询api文档|和风天气

<script>
			var xhr = new XMLHttpRequest;
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4) {
					console.log(xhr.responseText)
				}
			}
			xhr.open('get','https://devapi.qweather.com/v7/weather/now?location=这个是你要查询的城市，要输入经纬度&key=这是你的和风天气的key',true)
			xhr.send()
		</script>

返回的数据