调取高德天气的api

官方地址

请求方式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/[email protected]" alt="" v-if="weather === '晴'" />
        <img
          src="@/assets/img/[email protected]"
          alt=""
          v-else-if="weather === '少云'"
        />
        <img
          src="@/assets/img/[email protected]"
          alt=""
          v-else-if="weather === '晴间多云'"
        />
        <img
          src="@/assets/img/[email protected]"
          alt=""
          v-else-if="weather === '多云' || weather === '阴'"
        />
        <img
          src="@/assets/img/[email protected]"
          alt=""
          v-else-if="
            weather === '有风' ||
            weather === '平静' ||
            weather === '微风' ||
            weather === '和风' ||
            weather === '阴' ||
            weather === '清风'
          "
        />
        <img
          src="@/assets/img/[email protected]"
          alt=""
          v-else-if="
            weather === '强风/劲风' ||
            weather === '疾风' ||
            weather === '大风' ||
            weather === '烈风'
          "
        />
        <img
          src="@/assets/img/[email protected]"
          alt=""
          v-else-if="
            weather === '风暴' ||
            weather