Vue项目中获取当前位置的天气情况

获取当前位置的天气情况、温度、AQI指数等，结合了和风天气开发服务，接下来我们就简述一下改功能的开发。

1. 首先，我们先打开和风天气开发服务官网和风天气开发服务 ~ 强大、丰富的天气数据服务，注册接下来项目中所使用到的KEY。

注册完账户，登录后，点击新建，创建项目

新用户有一次免费的注册机会，选择免费订阅

建好后，这边可以生成接下来我们项目中所使用到的KEY

2. 接下来，我们就在项目中进行改功能的开发

这部分是该功能的核心代码，分别使用了两个和风天气服务提供的接口，这里传递你当地的经纬度，便可获取该地的天气情况。

getWeatherData(latitude, longitude) {
      // 和风天气服务中申请到的key
      const key = "YOUR_KEY";
      // 获取天气图标icon、温度，longitude经度、latitude纬度
      const url = `https://devapi.qweather.com/v7/weather/now?key=${key}&location=${longitude},${latitude}`;
      // 获取AQI指数
      const aqiUrl = `https://devapi.qweather.com/v7/air/now?key=${key}&location=${longitude},${latitude}`;
      axios.get(url)
        .then(response => {
          // 处理返回的天气数据
          this.nowWeather = response.data.now;
          console.log(this.nowWeather);
          // cloud: "100",dew: "4",feelsLike: "4",humidity: "91",icon: "501",obsTime: "2024-12-09T15:02+08:00",precip: "0.0",pressure: "960",temp: "6",text: "雾",vis: "6",wind360: "45",windDir: "东北风",windScale: "1",windSpeed: "5"
        })
        .catch(error => {
          console.error(error);
        });
      axios.get(aqiUrl)
        .then(response => {
          // 处理返回的天气数据
          this.nowAQI = response.data.now;
          console.log(this.nowAQI);
          // aqi: "36",category: "优",co: "0.4",level: "1",no2: "25",o3: "37",pm2p5: "22",pm10: "36",primary: "NA",pubTime: "2024-12-09T14:00+08:00",so2: "3"
        })
        .catch(error => {
          console.error(error);
        });
    }

完整代码如下：

项目中使用到的天气图标，是由和风天气提供的，文章下面会对图标做简述

<template>
  <div class="header">
    <div class="header-weather">
      <svg-icon :iconClass="nowWeatherHandler()" width="2.5vmin" height="2.5vmin" />
      <span class="temperature">{{ nowWeather && nowWeather.temp }}°C</span>
      <span class="aqi">AQI指数：</span>
      <span class="aqinum">{{ nowAQI && nowAQI.aqi }}</span>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "WEATHER",
  data() {
    return {
      nowWeather: null,
      nowAQI: null
    };
  },
  components: {},
  created() {
    const LOCATION = [30.523670, 104.068659];
    this.getWeatherData(LOCATION[0], LOCATION[1]);
  },
  methods: {
    nowWeatherHandler() {
      if(this.nowWeather&&this.nowWeather.icon) {
        return "qi-" + this.nowWeather.icon;
      }
      return "qi-100";
    },
    getWeatherData(latitude, longitude) {
      // 和风天气服务中申请到的key
      const key = "YOUR_KEY";
      // 获取天气图标icon、温度，longitude经度、latitude纬度
      const url = `https://devapi.qweather.com/v7/weather/now?key=${key}&location=${longitude},${latitude}`;
      // 获取AQI指数
      const aqiUrl = `https://devapi.qweather.com/v7/air/now?key=${key}&location=${longitude},${latitude}`;
      axios.get(url)
        .then(response => {
          // 处理返回的天气数据
          this.nowWeather = response.data.now;
          console.log(this.nowWeather);
          // cloud: "100",dew: "4",feelsLike: "4",humidity: "91",icon: "501",obsTime: "2024-12-09T15:02+08:00",precip: "0.0",pressure: "960",temp: "6",text: "雾",vis: "6",wind360: "45",windDir: "东北风",windScale: "1",windSpeed: "5"
        })
        .catch(error => {
          console.error(error);
        });
      axios.get(aqiUrl)
        .then(response => {
          // 处理返回的天气数据
          this.nowAQI = response.data.now;
          console.log(this.nowAQI);
          // aqi: "36",category: "优",co: "0.4",level: "1",no2: "25",o3: "37",pm2p5: "22",pm10: "36",primary: "NA",pubTime: "2024-12-09T14:00+08:00",so2: "3"
        })
        .catch(error => {
          console.error(error);
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 100%;
  background-size: auto;
  position: relative;
  .header-weather {
    position: absolute;
    bottom: 0;
    right: 5.5%;
    display: flex;
    align-items: center;
    font-size: 2vmin;
    .temperature {
      font-family: 'DINPro-Bold';
      margin: 0 2vmin 0 1vmin;
      font-size: 2.4vmin;
    }
    .aqi {
      // font-size: 1.9vmin;
      font-weight: 500;
    }
    .aqinum {
      font-family: 'DINPro-Bold';
      font-size: 2.4vmin;
    }
  }
}
</style>

和风天气提供的天气图标如同所示，大家可以自行下载使用，地址：图标说明 | 和风天气开发服务

实时天气API 

属性	说明
now.obsTime	数据观测时间
now.temp	温度，默认单位：摄氏度
now.feelsLike	体感温度，默认单位：摄氏度
now.icon	天气状况的图标代码，另请参考天气图标项目
now.text	天气状况的文字描述，包括阴晴雨雪等天气状态的描述
now.wind360	风向360角度
now.windDir	风向
now.windScale	风力等级
now.windSpeed	风速，公里/小时
now.humidity	相对湿度，百分比数值
now.precip	过去1小时降水量，默认单位：毫米
now.pressure	大气压强，默认单位：百帕
now.vis	能见度，默认单位：公里
now.cloud	云量，百分比数值。可能为空
now.dew	露点温度。可能为空

实时空气质量API 

属性	说明
now.pubTime	空气质量数据发布时间
now.aqi	空气质量指数
now.level	空气质量指数等级
now.category	空气质量指数级别
now.primary	空气质量的主要污染物，空气质量为优时，返回值为NA
now.pm10	PM10
now.pm2p5	PM2.5
now.no2	二氧化氮
now.so2	二氧化硫
now.co	一氧化碳
now.o3	臭氧

其他API可参考和风天气官网：城市天气 | 和风天气开发服务