前端获取地区的天气状况

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

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

一:配置高德地图

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

返回的数据


目录
相关文章
|
JavaScript
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
【vue】 vue2 自定义指令 实现全屏 、对话框拖拽
560 2
|
容器
Handsontable - 配置属性(下)
Handsontable - 配置属性(下)
1513 0
Handsontable - 配置属性(下)
|
8月前
|
JSON API PHP
天气预报免费API接口【地址查询版】使用教程
本文介绍了如何使用中国气象局官方数据提供的免费天气预报API接口,通过省份和地点查询指定地区当日天气信息。该接口由接口盒子支持,提供JSON格式数据、GET/POST请求方式,并需注册获取用户ID和KEY进行身份验证。
4524 2
|
JavaScript 前端开发
vue前端获取本地IP地址
vue前端获取本地IP地址
|
Java Kotlin
Kotlin15 - 方法重载与默认参数
Kotlin15- 方法重载与默认参数
Kotlin15 - 方法重载与默认参数
|
移动开发 JavaScript 前端开发
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
【前端用法】html5实现地理位置定位(JS获取当前地理位置的方法)
1656 1
|
数据可视化 JavaScript 前端开发
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
使用 ECharts 绘制3D饼图,立体效果华丽渲染!
|
Java 程序员
国际化常用时间格式并进行格式转换
国际化常用时间格式并进行格式转换
757 0
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
665 0

热门文章

最新文章