使用高德api获取天气情况

• 效果如下，图标是自己根据天气名称匹配的
  

一、登录高德开放平台

https://lbs.amap.com/

二、找到天气服务

三、说明

天气查询是一个简单的 HTTP 接口，根据用户输入的 adcode 或者 区域名称，查询目标区域当前/未来的天气情况。

四、步骤说明

4.1. 申请Web服务的key

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

4.1.1. 新建应用

4.1.2. 在应用中添加key

• 这里一定要选择Web服务
  

4.1.3. 保存key

4.2. 天气查询

4.2.1. 天气查询API服务说明

URL	请求方式
https://restapi.amap.com/v3/weather/weatherInfo?parameters	GET

parameters参数说明 https://lbs.amap.com/api/webservice/guide/api/weatherinfo

返回结果参数说明 https://lbs.amap.com/api/webservice/guide/api/weatherinfo

4.2.2. city参数说明

• 可以是查询的城市的名称，如：南京
• 也可以是城市的 adcode，adcode 信息可参考 城市编码表【下面着重讲这个】

4.2.3. 如何根据经纬度获取城市的adcode

/**
 * 如何根据经纬度获取城市的adcode
 */
getAdcode() {
  return new Promise(async (resolve, reject) => {
    let locationX = 123.456;
    let locationY = 123.456;
    try {
      const res = await axios.get("https://restapi.amap.com/v3/geocode/regeo", {
        params: {
          key:'你的高德key',
          location: `${locationX},${locationY}`,
        },
      });
      const httpStatus = res?.status;
      const data = res?.data;
      if (httpStatus === 200 && data?.status == "1") {
        const adcode = data?.regeocode?.addressComponent?.adcode;
        if (!adcode) return reject("获取区域编码失败");
        resolve(adcode);
      } else {
        reject(data?.info || "获取区域编码失败");
      }
    } catch (error) {
      reject(error);
    }
  });
},

4.2.4. 根据获取的adcode查询天气

/**
 * 天气查询
 */
getWeather() {
  return new Promise(async (resolve, reject) => {
    try {
      let adcode = await this.getAdcode();
      if (!adcode) return reject("city为空");
      const res = await axios.get(getWeatherUrl, {
        params: {
          key,
          city: adcode,
          extensions: "all", // base: 实时天气, all: 预报天气
          output: "JSON",
        },
      });
      const httpStatus = res?.status;
      const data = res?.data;
      if (httpStatus === 200 && data?.status == "1") {
        const forecasts = data?.forecasts || [];
        if (!forecasts) return reject("获取天气预报失败");
        resolve(forecasts?.[0] || {});
      } else {
        reject(data?.info || "获取天气预报失败");
      }
    } catch (error) {
      reject(error);
    }
  });
},