调取高德天气的api

小阳生煎

已于 2022-07-07 14:14:17 修改

阅读量1.9k

点赞数 1

分类专栏： # Vue2 文章标签： vue.js

于 2021-09-14 09:56:02 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/120281142

版权

本文介绍如何在Vue.js项目中调用高德天气API，通过GET请求获取天气信息，并展示请求参数和返回的天气图标。提供了一个简单的示例来说明实现过程。

摘要由CSDN通过智能技术生成

官方地址

请求方式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 === '狂爆风