官方地址

请求方式get请求 下图是请求的参数

示例

https://restapi.amap.com/v3/weather/weatherInfo
?key=fe23b6a085b5aef9b825082cde62295e
&city=330100&extensions=all

有无温度区间根据下图的参数不同来显示

里面有对于的天气图标

模板

对于img在assets的img

上传的项目img

!<template>
  <div class="main">
    <div class="weather">
      <div class="item">
        <img src="@/assets/img/qing@3x.png" alt="" v-if="weather === '晴'" />
        <img
          src="@/assets/img/shaoy@3x.png"
          alt=""
          v-else-if="weather === '少云'"
        />
        <img
          src="@/assets/img/qingjdy@3x.png"
          alt=""
          v-else-if="weather === '晴间多云'"
        />
        <img
          src="@/assets/img/tq@3x.png"
          alt=""
          v-else-if="weather === '多云' || weather === '阴'"
        />
        <img
          src="@/assets/img/weif@3x.png"
          alt=""
          v-else-if="
            weather === '有风' ||
            weather === '平静' ||
            weather === '微风' ||
            weather === '和风' ||
            weather === '阴' ||
            weather === '清风'
          "
        />
        <img
          src="@/assets/img/jinf@3x.png"
          alt=""
          v-else-if="
            weather === '强风/劲风' ||
            weather === '疾风' ||
            weather === '大风' ||
            weather === '烈风'
          "
        />
        <img
          src="@/assets/img/redfb@3x.png"
          alt=""
          v-else-if="
            weather === '风暴' ||
            weather === '狂爆风' ||
            weather === '飓风' ||
            weather === '热带风暴'
          "
        />
        <img
          src="@/assets/img/mai@3x.png"
          alt=""
          v-else-if="weather === '霾'"
        />
        <img
          src="@/assets/img/zhongdm@3x.png"
          alt=""
          v-else-if="weather === '中度霾'"
        />
        <img
          src="@/assets/img/zhongdum@3x.png"
          alt=""
          v-else-if="weather === '重度霾'"
        />
        <img
          src="@/assets/img/yanzm@3x.png"
          alt=""
          v-else-if="weather === '严重霾'"
        />
        <img
          src="@/assets/img/zheny@3x.png"
          alt=""
          v-else-if="weather === '阵雨'"
        />
        <img
          src="@/assets/img/leizy@3x.png"
          alt=""
          v-else-if="weather === '雷阵雨'"
        />
        <img
          src="@/assets/img/leizybybb@3x.png"
          alt=""
          v-else-if="weather === '雷阵雨并伴有冰雹'"
        />
        <img
          src="@/assets/img/xiaoy@3x.png"
          alt=""
          v-else-if="
            weather === '小雨' || weather === '毛毛雨/细雨' || weather === '雨'
          "
        />
        <img
          src="@/assets/img/zhongy@3x.png"
          alt=""
          v-else-if="weather === '中雨' || weather === '小雨-中雨'"
        />
        <img
          src="@/assets/img/day@3x.png"
          alt=""
          v-else-if="weather === '大雨' || weather === '中雨-大雨'"
        />
        <img
          src="@/assets/img/baoy@3x.png"
          alt=""
          v-else-if="
            weather === '暴雨' ||
            weather === '大暴雨' ||
            weather === '特大暴雨' ||
            weather === '极端降雨' ||
            weather === '大雨-暴雨' ||
            weather === '大雨-特大暴雨' ||
            weather === '暴雨-大暴雨'
          "
        />
        <img
          src="@/assets/img/yuxtq@3x.png"
          alt=""
          v-else-if="
            weather === '雨雪天气' ||
            weather === '雨夹雪' ||
            weather === '阵雨夹雪'
          "
        />
        <img src="@/assets/img/dongy@3x.png" alt="" v-if="weather === '冻雨'" />
        <img
          src="@/assets/img/qiangzy@3x.png"
          alt=""
          v-if="weather === '强阵雨'"
        />
        <img
          src="@/assets/img/qianglzy@3x.png"
          alt=""
          v-if="weather === '强雷阵雨'"
        />
        <img
          src="@/assets/img/xue@3x.png"
          alt=""
          v-else-if="weather === '雪' || weather === '阵雪'"
        />
        <img src="@/assets/img/xiaox@3x.png" alt="" v-if="weather === '小雪'" />
        <img
          src="@/assets/img/zhongx@3x.png"
          alt=""
          v-else-if="weather === '中雪' || weather === '小雪-中雪'"
        />
        <img
          src="@/assets/img/dax@3x.png"
          alt=""
          v-else-if="weather === '大雪' || weather === '中雪-大雪'"
        />
        <img
          src="@/assets/img/baox@3x.png"
          alt=""
          v-else-if="weather === '暴雪' || weather === '大雪-暴雪'"
        />
        <img src="@/assets/img/fuc@3x.png" alt="" v-if="weather === '浮尘'" />
        <img src="@/assets/img/yangc@3x.png" alt="" v-if="weather === '扬尘'" />
        <img
          src="@/assets/img/shacb@3x.png"
          alt=""
          v-else-if="weather === '沙尘暴' || weather === '强沙尘暴'"
        />
        <img
          src="@/assets/img/longjf@3x.png"
          alt=""
          v-if="weather === '龙卷风'"
        />
        <img
          src="@/assets/img/wu@3x.png"
          alt=""
          v-else-if="
            weather === '雾' ||
            weather === '浓雾' ||
            weather === '强浓雾' ||
            weather === '轻雾' ||
            weather === '大雾' ||
            weather === '特强浓雾'
          "
        />
        <img src="@/assets/img/re@3x.png" alt="" v-if="weather === '热'" />
        <img src="@/assets/img/leng@3x.png" alt="" v-if="weather === '冷'" />
        <img src="@/assets/img/weiz@3x.png" alt="" v-if="weather === '未知'" />
        <p>{{ weather }} {{ temperature }}℃</p>
      </div>
      <div class="item">
        <img src="@/assets/img/sd@2x.png" alt="" />
        <p>湿度：{{ humidity }}</p>
      </div>
      <div class="item">
        <img src="@/assets/img/fl@3x.png" alt="" />
        <p>风力：{{ windpower }}级</p>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      weather: "",
      temperature: "",
      humidity: "",
      windpower: "",
    };
  },
  created() {
    this.WeatherInfo();
  },
  methods: {
    WeatherInfo() {
      axios
        .get(
          'https://restapi.amap.com/v3/weather/weatherInfo?key=7b2497371bd635ded2bd83974065f47f&city=411700&extensions=base'
        )
        .then((res) => {
          console.log(res.data,'rtes')
          this.weather = res.data.lives[0].weather;
          this.temperature = res.data.lives[0].temperature;
          this.humidity = res.data.lives[0].humidity;
          this.windpower = res.data.lives[0].windpower;
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.weather {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 95%;
  margin: 20px auto;
  border-radius: 10px;
  height: 48px;
  padding: 0 15px;
  background-color: #002e55;
  border-bottom: 1px solid #f5f5f5;
  .item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #888b77;
    img {
      margin-right: 4px;
      width: 30px;
      height: 32px;
    }
  }
}
</style>