Gaode web api obtains real-time weather information in the region through adcode, and there is a free quota of 300,000 queries per day

I made a small application for route planning before: https://kylebing.cn/tools/map/#/route/route-line
When I was free, I wanted to see if I could display the weather data in the route, and checked the relevant information on AutoNavi In the documentation, I found an interface to obtain weather information through adcode. Its free calls are 300,000 times a day, which is completely enough for route planning.

1. Basic knowledge

1. `adcode`What is it,

It is the number of each administrative region. For example, the number of Ju County 371122is the prefix of the ID card of people born in this area. My ID card starts with this.

You can also query through the tools I developed:
https://kylebing.cn/tools/map/#/tool/district-info

2. You need to apply for the key of the official web service api service

Note that the type of application is web service api, which is the service interface of map information. This key is required for each request.

Gaode application console: https://console.amap.com/dev/key/app

2. Weather request interface

The interface is very simple and clear, requiring only two parameters:

service key
ad code

Official instructions: https://lbs.amap.com/api/webservice/guide/api/weatherinfo

The obtained weather data is as follows:
insert image description here

That's it, you get the data, just do the business you need.

3. Get the weather through the path planning data

First of all, you need to know the method of path planning, you can see my tutorial:

How to use Gaode map API to make a route planning application to display custom routes

Assuming that the above has been done, let's take a look at what the returned data looks like.

1. Get route data

The data of this path planning is not returned through the ordinary API, but in the plug-in of AutoNavi, so you cannot see this data from the debug window of the browser.

map.plugin('AMap.DragRoute', () => {
    
    
        // path 是驾车导航的起、途径和终点，最多支持16个途经点
        this.currentDragRouting = new AMap.DragRoute(map, path, line.policy, {
    
     // 此处省略})

        // 路线规划完成时
        this.currentDragRouting.on('complete', res => {
    
    
            console.log(res)
            // 路径规划的所有数据都在这个 res 里
        })

resIn the content of this , there is one steps, and stepeach of these marks the address position of this point, which contains what we needadcode
insert image description here

2. Filter the regional data in the deduplication path

For example, there are 216 waypoints in the above data, but there are actually many duplicates in the address position of each point, we need to filter it, and only keep one for each region.

let steps = res.data.routes[0].steps
let 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. Obtain the weather data of each region and display them centrally

Define a method to request weather information and return proimse

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

Use the region array data obtained in step 2 to convert it into the axiosrequested array. Centrally request weather data for these points.

// 将地区数组转化成 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)
   })

The result of this is this:
insert image description here
then beautify it and put it in the project to display it like this.

Its request response time is also relatively fast.

insert image description here