高德地图api接口免费查询天气实战案例,axios请求查询天气,js版,【接上一篇微信测试号推送纪念日】
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、高德地图
- 1、注册高德地图
- 2、创建应用
- 3、为你的应用添加key
- 二、编写代码
- 1.封装get请求和post请求
- 2.编写请求城市adcode代码
- 3.获取城市adcode编码运行成功
- 4.用adcode城市编码获取天气
- 总结
- 白嫖党看这里,代码成品,cv食用
前言
心血来潮想搞一个天气查询
看了网上很多的天气查询接口,发现很多,要么就是付费的,要么就是免费但是不稳定,不知道啥时候就失效了。
正好高德地图有查询天气的接口,但是教程很少,这里出一期高德地图查询天气
一、高德地图
必须要用到高德地图的key,所以得注册开发者账号
1、注册高德地图
首先登录注册高德地图开发平台
高德官网
2、创建应用
在你的控制台页面》应用管理》我的应用,这里添加一个应用
3、为你的应用添加key
在创建应用好了之后,是没有任何东西的。
这时候要添加一个key,非常简单。看图吧
必须选择Web服务端
因为只有web服务才有天气查询,如果选错了,删除重新添加。
这里我都确认过了,创建web端就好了。
创建完了之后,你会获得一个key,记住这个key,待会要用
二、编写代码
由于我是基于js来写的,js的请求有很多,比如ajax、axios
我这里用axios来请求,ajax原理是一样的、写法不同而已,这里不做演示。
1.封装get请求和post请求
代码如下(示例):
// 万能请求封装
const axios = require('axios');
// 设置跨域请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 定义post请求方法
const axiosPost = function (url, params) {return new Promise((resolve, reject) => {axios.post(url, params).then(res => {resolve(res);}).catch(err => {reject(err);});});
};
// 定义get请求方法
const axiosGet = function (url, params) {return new Promise((resolve, reject) => {axios.get(url, {params,}).then(res => {resolve(res);}).catch(err => {reject(err);});});
};
// 用法
async function getToken() {const params = {appid: '', // 你的appid 1secret: '', // 你的secret 2};let res = await axiosGet('https://api.weixin.qq.com/cgi-bin/token', params);// let res = await axiosPost(url, params); post同理return res.data.access_token;
}
// 执行方法,如果需要同步、前面加上 await
getToken()
这里是把get和post请求做了封装处理,就是参数处理了一下。
如果要添加方法,仿写这个getToken就好了
,非常简单
2.编写请求城市adcode代码
为啥要获取城市的adcode区域编码?
我看了几篇关于用高德地图查询天气的文章,他们都是根据城市名,市+区就能查到,但是教程都是20年、19年的。
高德地图后面改了,只能用编码来获取天气,如图
所以,要想查天气,就得知道你城市的adcode编码,刚好高德地图可以通过查询地址,返回值就有adcode编码
把getToken改写一下(如下所示):
async function getCity() {const params = {key: '', // 你的key 1address: '湖南省长沙市芙蓉区', // 你的地址信息 2};let res = await axiosGet('https://restapi.amap.com/v3/geocode/geo?parameters', params);// let res = await axiosPost(url, params); post同理console.log('打印res:', res.data)// return res.data
}
// 执行方法
getCity()
把你的key值填进去,然后执行这个js,nodeJs的执行原理就是node ***.js
3.获取城市adcode编码运行成功
把adcode编码返回出来就好了,这里用return
async function getCity() {const params = {key: '', // 你的key 1address: '湖南省长沙市芙蓉区', // 你的地址信息 2};let res = await axiosGet('https://restapi.amap.com/v3/geocode/geo?parameters', params);// let res = await axiosPost(url, params); post同理// console.log('打印res:', res.data.geocodes)return res.data.geocodes[0].adcode // 注意,geocodes是个数组
}
把打印语句注释,加上return
4.用adcode城市编码获取天气
现在来编写获取城市天气的代码
官网文档
async function getWeather() {const adcode = await getCity();const params = {key: '', // 你的key 1city: adcode,extensions: 'base'};let res = await axiosGet('https://restapi.amap.com/v3/weather/weatherInfo?parameters', params);console.log('打印res:', res.data.lives[0])// {// province: '湖南', 省份名// city: '芙蓉区', 城市名// adcode: '430102', 区域编码// weather: '晴', 天气现象// temperature: '33', 气温// winddirection: '西', 风向// windpower: '≤3', 风力级别// humidity: '28', 空气湿度// reporttime: '2022-09-16 15:31:31'// }
}
getWeather()
总结
获取到天气的信息之后,就可以拿来结合上一篇微信测试号发送信息,像token一样,return出去,然后接收,使用。
基于nodeJs运行,需要电脑安装了nodejs,并且运行环境下有axios
安装语句
npm install axios
必须要有node_nodules依赖文件,才能执行这个js文件,
白嫖党看这里,代码成品,cv食用
代码成品,复制可用,简洁明了带注释
// 只需要填入key和你的城市信息,已经标记出来了
const axios = require('axios');
// 设置跨域请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 定义post请求方法
const axiosPost = function (url, params) {return new Promise((resolve, reject) => {axios.post(url, params).then(res => {resolve(res);}).catch(err => {reject(err);});});
};
// 定义get请求方法
const axiosGet = function (url, params) {return new Promise((resolve, reject) => {axios.get(url, {params,}).then(res => {resolve(res);}).catch(err => {reject(err);});});
};
// 获取城市编码
async function getCity() {const params = {key: '', // 你的key 1address: '湖南省长沙市芙蓉区', // 你的地址信息 2};let res = await axiosGet('https://restapi.amap.com/v3/geocode/geo?parameters', params);return res.data.geocodes[0].adcode
}async function getWeather() {const adcode = await getCity();const params = {key: '', // 你的key 1city: adcode,extensions: 'base'};let res = await axiosGet('https://restapi.amap.com/v3/weather/weatherInfo?parameters', params);console.log('打印res:', res.data.lives[0])// {// province: '湖南', 省份名// city: '芙蓉区', 城市名// adcode: '430102', 区域编码// weather: '晴', 天气现象// temperature: '33', 气温// winddirection: '西', 风向// windpower: '≤3', 风力级别// humidity: '28', 空气湿度// reporttime: '2022-09-16 15:31:31'// }
}
getWeather()
key被复用了,可以把它丢在外面,但是懒得写了,网友拿去改吧
高德地图api接口免费查询天气实战案例,axios请求查询天气,js版,【接上一篇微信测试号推送纪念日】相关推荐
- 高德地图api接口文档_在 R 语言里面调用高德地图接口:地理编码与路径规划
你知道从广州南站去珠江新城怎么走么?今天就让我们一起使用 R 语言调用高德地图的地理编码(地址转经纬度)接口和路径规划接口来回答这个问题. 准备工作 注册高德地图,创建应用添加 Key(注意申请 Ke ...
- Python调用高德地图API实现经纬度换算、地图可视化
作者 | 糖甜甜甜 出品 | 经管人学数据分析 Python调用高德地图API实现经纬度换算.地图可视化 前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地 ...
- python 根据经纬度 调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...
- 你还在为高德地图找不到门牌号等详细地址而烦恼吗?你还在等什么——Python调用高德地图API实现经纬度换算、地图可视化
Python调用高德地图API实现经纬度换算.地图可视化 前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出 ...
- python调用高德地图api 可视化_Python调用高德地图API实现经纬度换算、地图可视化...
前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请密 ...
- 手机端获取用户详细地理位置(高德地图API)
项目开发需要获取用户详细的地理位置信息,使用了高德地图API接口 1,注册高德地图开发者账号获取开发者Key 2,页面调用 1 <script type="text/javascrip ...
- H5之vue3+高德地图api
众所周知,在移动端app中,iOS定位和安卓定位都可以使用GPS,配合着高德,百度,腾讯的api可以很方便的处理定位,导航,路线规划等一系列问题,但是对于H5端的定位情况,却有些复杂. 浏览器定位是否 ...
- android 地铁地图api,利用高德地图api绘制公交+地铁的等时圈
等时圈是指从某点出发,以某种交通方式在特定时间内能到达的距离覆盖的范围,在可达性分析中十分常见.原本我们需要将地图栅格化不停地调用路径规划api来获得等时圈,现在已经有网站为我们做好了这些工作,比如h ...
- 调用腾讯地图API、高德地图API 获取当前地理位置、经纬度
调用腾讯地图API.高德地图API 获取当前地理位置.经纬度 web开发中,很多情况下都会需要获取当前位置的经纬度,在网上找了几个不同的地图,最终找到兼容比较好的腾讯地图API 1.调用腾讯地图API ...
- android高德天气api接口,天气查询-API文档-开发指南-Web服务 API | 高德地图API
产品介绍 天气查询是一个简单的HTTP接口,根据用户输入的adcode,查询目标区域当前/未来的天气情况. 使用API前您需先申请Key,若无高德地图API账号需要先申请账号. 适用场景 需要使用相关 ...
最新文章
- Spring中@Autowired注解、@Resource注解的区别
- 【分块】#6281. 数列分块入门 5(区间开方,区间求和)
- 初识用.NET Remoting来开发分布式应用 (转载)
- java html字符串,java字符串方法
- Android4: HDMI system in ICS
- matlab确定污染源位置,确定污染源的位置
- 线程知识-ThreadLocal使用详解
- Linux ping命令、Linux kill命令、Linux logname命令、 Linux logout命令
- mysql数据库更改文档_更改MySQL数据库目录位置
- SLAM算法中的数据关联问题
- Linux Shell 判断块设备节点是否存在
- 在服务器端运行JavaScript文件(二)
- u盘插在电脑上灯亮没有反应_如何解决U盘指示灯亮着却不显示问题
- 【生信技能树】GEO数据库挖掘 P7 6差异分析
- Java - 过滤器有哪些作用和用法?
- Excel中经纬度格式化处理
- Linux环境下配置虚拟ip,方法2:单网卡绑定多IP
- CCRC信息安全服务资质审核费用是多少?
- [Maven 基础]-- Dependency Scope
- 名字空间的含义及作用
热门文章
- 免费个人商城系统源码推荐
- MacBook Air 2015换硬盘
- 【Unity学习】Unity GetCurrentAnimatorStateInfo方法判断动画播放
- c语言三维空间间绕坐标轴变换,浙江大学软件学院三维动画与交互技术考试概念拾掇...
- matlab计算轮廓曲率半径,【转】求最小曲率半径matlab源程序
- x86_64 gnu/linux,linux版本信息以及x86与x86_64的差别
- Phalcon框架的入门使用,Phalcon框架学习,编写简单的视图输出及数据库写入!
- phalcon 自动加载_Phalcon自动加载(PHP自动加载)
- NC18979 毒瘤xor
- 淘宝图片指纹匹配功能c#实现