前端获取地区的天气状况

简介: 前端获取地区的天气状况

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

一:配置高德地图

高德地图的查看天气的话,是每天免费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>

返回的数据


目录
相关文章
|
4月前
|
Web App开发 前端开发 JavaScript
前端检测用户地区
前端检测用户地区
|
5月前
|
存储 数据可视化 数据挖掘
Python统计全球星巴克门店的数据及在不同国家和地区门店数量可视化(超详细 附源码)
Python统计全球星巴克门店的数据及在不同国家和地区门店数量可视化(超详细 附源码)
92 2
vue+echarts实现疫情(全国新增趋势、境外输入省市TOP5)
vue+echarts实现疫情(全国新增趋势、境外输入省市TOP5)
109 0
vue+echarts实现疫情(全国新增趋势、境外输入省市TOP5)
|
Web App开发 JavaScript Python
amazeUI 地区选择器三级联动问题解决,带地区数据
<div id="area_box"> <select data-am-selected="{maxHeight:200,btnWidth:'120px'}" placeholder="请选择省" id="province"> .
1977 0