您现在的位置是:首页 > 经典句子

高德 web api 通过 adcode 获取地区实时天气信息,每天有30万次查询的免费额度

作者:焦糖时间:2024-04-16 08:01:32分类:经典句子

简介  文章浏览阅读2.9k次,点赞2次,收藏6次。之前做了个路线规划的小应用:闲下来想看看能不能展示一下路线中的天气数据,查了下高德相关文档,找到了通过 adcode 获取天气信息的接口,它的免费调用次数是每天 30 万次,这个量用于路线规划是完全够用了。_adc

点击全文阅读

高德 web api 通过 adcode 获取地区实时天气信息,每天有30万次查询的免费额度

之前做了个路线规划的小应用: https://kylebing.cn/tools/map/#/route/route-line
闲下来想看看能不能展示一下路线中的天气数据,查了下高德相关文档,找到了通过 adcode 获取天气信息的接口,它的免费调用次数是每天 30 万次,这个量用于路线规划是完全够用了。

一、基础知识

1. adcode 是什么,

是每个行政地区的编号,比如莒县的编号就是 371122,在这个地区出生的人的身份证前缀都是地区编号,我的身份证就是以这个开头的。

你也可以通过我开发的工具查询:
https://kylebing.cn/tools/map/#/tool/district-info

2. 需要申请官方的 web service api 服务的 key

注意申请的类型,是 web service api,这是地图信息的服务接口,每次请求都需要这个 key 才能请求。

高德应用控制台: https://console.amap.com/dev/key/app

二、天气请求接口

接口很简单明了,只需要两个参数:

服务 keyadcode

官方说明: https://lbs.amap.com/api/webservice/guide/api/weatherinfo

获取到的天气数据是这样的:
在这里插入图片描述

这样就可以了,你拿到数据了,做你需要的业务就好了。

三、通过路径规划的数据获取天气

首先你需要知道路径规划的方法,可以看我的教程:

如何使用高德地图 API 做一个路线规划应用,展示自定义路线

假设上面已经搞定了,我们来看一下返回的数据是什么样的。

1. 获取路径数据

这个路径规划的数据并不是通过普通的 api 返回的,而是在高德的插件里,所以你从浏览器的调试窗口中是看不到这个数据的。

map.plugin('AMap.DragRoute', () => {        // path 是驾车导航的起、途径和终点,最多支持16个途经点        this.currentDragRouting = new AMap.DragRoute(map, path, line.policy, { // 此处省略})        // 路线规划完成时        this.currentDragRouting.on('complete', res => {            console.log(res)            // 路径规划的所有数据都在这个 res 里        })

这个 res 的内容里,有个 steps,而这个 step 每个都标记了这个点的地址位置,里面有我们需要的 adcode
在这里插入图片描述

2. 过滤去重路径中的地区数据

比如上面这个数据中有 216 个路径点,但这里面每个点的地址位置其实是有很多重复的,我们需要将其过滤一下,每个地区只留一个。

let steps = res.data.routes[0].stepslet districtsMap = new Map()steps.forEach(item => {    item.cities.forEach(city => {        city.districts.forEach(district => {            if (districtsMap.has(district.adcode)){ // 如果已经有这个地区了就不用做什么            } else { // 如果没有就添加它到集合中,其实不需要这么多数据,只需要 adcode 也行                districtsMap.set(district.adcode, {name: [city.name, district.name], adcode: district.adcode})            }        })    })})

3. 获取每个地区的天气数据并集中展示

定义一个请求天气信息返回 proimse 的方法

getWeather(adcode){    return axios({        url: 'https://restapi.amap.com/v3/weather/weatherInfo',        params: {            key: mapConfig.key_service,            city: adcode        }    })},

使用第2步获取到的地区数组数据,将其转换成 axios 请求的数组。集中请求这些点的天气数据。

// 将地区数组转化成 axios 请求的数组。let weatherRequestArray = []districtsMap.forEach((value,key) => {    weatherRequestArray.push(this.getWeather(key))})// 集中获取天气数据axios   .all(weatherRequestArray)   .then(response => {   // 格式化数据到 markdown 文本       let weatherString = '\n\n### 天气信息\n\n'       response.forEach((res, index) => {           let weatherData = res.data.lives[0]           weatherString = weatherString.concat(`${index + 1}. ${weatherData.province}-${weatherData.city}: ${weatherData.temperature}℃ | ${weatherData.humidity}%RH, ${weatherData.weather},\n`)       })       this.activeLineObj.note = this.activeLineObj.note.concat(weatherString)   })

这样出来的结果是这样的:
在这里插入图片描述
然后美化一下放到工程中就可以展示成这样了。
在这里插入图片描述
其请求的响应时间也是比较快的。

在这里插入图片描述

点击全文阅读

郑重声明:

本站所有活动均为互联网所得,如有侵权请联系本站删除处理

我来说两句