高德地图api接口免费查询天气实战案例,axios请求查询天气,js版,【接上一篇微信测试号推送纪念日】
心血来潮想搞一个天气查询看了网上很多的天气查询接口,发现很多,要么就是付费的,要么就是免费但是不稳定,不知道啥时候就失效了。正好高德地图有查询天气的接口,但是教程很少,这里出一期高德地图查询天气获取到天气的信息之后,就可以拿来结合上一篇微信测试号发送信息,像token一样,return出去,然后接收,使用。基于nodeJs运行,需要电脑安装了nodejs,并且运行环境下有axios安装语句必须要有
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
心血来潮想搞一个天气查询
看了网上很多的天气查询接口,发现很多,要么就是付费的,要么就是免费但是不稳定,不知道啥时候就失效了。
正好高德地图有查询天气的接口,但是教程很少,这里出一期高德地图查询天气
一、高德地图
必须要用到高德地图的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 1
secret: '', // 你的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 1
address: '湖南省长沙市芙蓉区', // 你的地址信息 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 1
address: '湖南省长沙市芙蓉区', // 你的地址信息 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 1
city: 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 1
address: '湖南省长沙市芙蓉区', // 你的地址信息 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 1
city: 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被复用了,可以把它丢在外面,但是懒得写了,网友拿去改吧
更多推荐
所有评论(0)