基于Vue.js和高德地图API来实现一个简易的天气预报

今天就让我们来使用 Vue.js 和高德地图开放平台提供的 API，实现一个关于天气预报的小demo，实时查询当前城市的天气以及未来三天的天气预测，且实现切换城市查询。实现效果如下；

准备工作

既然要使用真实的数据，那么就需要用到高德地图开放平台提供的天气查询 API，先高德地图api注册为开发者。然后点击文档与支持，选择JS API。

然后登录到控制台创建一个应用并且添加一个key，服务平台为Web端（JS API）。

终端npm create vite@latest使用vite创建项目，npm install下载该项目需要用的包，npm run dev运行项目。

将天气预报的功能全部开发在weather.vue里面，再将这个组件import weather from "./components/weather.vue"引入到app.vue中。

js代码概览

具体代码步骤实现

开始weather.vue里面的代码了。

html 部分；

<div>
// 头部
<div class="head">
<div class="city-name">
<i class="iconfont icon-dingwei"></i>

        {{ state.city }}
</div>
<div @click="toggle" class="city-change">
<i class="iconfont icon-24gf-city3"></i>

        切换城市
</div>
</div>

// 中间部分实时温度
<div class="main">
<div class="weather-info">
<p class="temp">{{ state.weather.temperature }}℃</p>
<div class="info">{{ state.weather.weather }}</div>
<div class="detail">
<div class="item">
<i class="iconfont icon-shuidi"></i>
<span>湿度</span>
<span>{{ state.weather.humidity }}</span>
</div>
<div class="item">
<i class="iconfont icon-feng"></i>
<span>风向</span>
<span>{{ state.weather.windDirection }}</span>
</div>
<div class="item">
<i class="iconfont icon-fengli"></i>
<span>风力</span>
<span>{{ state.weather.windPower }}</span>
</div>
</div>
</div>


      // 未来三日的天气预报
<div class="future">
<div class="future-title">三日天气预报</div>
<div class="future-content">
<div v-for="(item,i) in state.future" class="forecast">
<p class="week">周{{ chinese[Number(item.week)-1] }}</p>
<i :class="getWeatherIcon(item.dayWeather)"></i>
<p><span class="left">{{ item.dayTemp }}℃</span>  <span class="right"> / {{ item.nightTemp }}℃</span></p>
</div>
</div>
</div>
</div>

// 切换城市input框
<div v-show="state.isVisible" >
<input id="newCity" @keydown.enter="handle" type="text" v-model="state.newCity" placeholder="请输入你要查询的城市">
</div>
</div>

然后使用css样式美化成如下界面；

js部分

接下来就是渲染其中的数据了，首先使用高德 api 来获取定位数据，查看官方文档，JS API结合 Vue 使用，首先安装Loader，如下所示，复制到当前文件终端安装。

然后复制代码粘贴；

AMapLoader 是高德地图 js API 的加载器，它可以在前端项目中加载和初始化高德地图的 js API。

import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, reactive } from 'vue'

onMounted(() => {   // 在浏览器上出现内容时候触发
// 加载官方提供的方法
window._AMapSecurityConfig = {
securityJsCode: "", // 密钥

  };
AMapLoader.load({
key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']

  })

// 加载完上面代码高德提供的服务后，执行then后面的操作

    .then((AMap) => {
// 获取定位
getLocalCity(AMap)  // 使用一个函数，将获取地址信息放到这个函数中

    })

})

获取城市信息

官方文档：

const getLocalCity = (AMap) => {
AMap.plugin('AMap.CitySearch', function () {
var citySearch = new AMap.CitySearch()

    citySearch.getLocalCity(function (status, result) {
if (status === 'complete' && result.info === 'OK') {
// 查询成功，result即为当前所在城市信息
console.log(result.city);  // 会打印当前城市

        state.city = result.city  //将城市改为定位获取到的城市
getWeather(AMap)   // 获取天气

      }

    })

  })

}

利用该地址获取实时天气数据

const getWeather = (AMap) => {
//加载天气查询插件
AMap.plugin("AMap.Weather", function () {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询

    weather.getLive(state.city, function (err, data) {  // 将城市替换成state.city
console.log(err, data);  // 获取天气数据，详情见下表

      state.weather = data     // 将数据赋值给 state.weather
getForecast(AMap)     //  后面用来获取未来三天的天气

    });

  });

}

将这一整个对象赋值给state.weather然后再state.weather.渲染到页面上。

获取未来三天天气

const getForecast = (AMap) => {
AMap.plugin("AMap.Weather", function () {
//创建天气查询实例
var weather = new AMap.Weather();
//执行实时天气信息查询

  weather.getForecast(state.city, function (err, data) {
console.log(err, data);  

    state.future = data.forecasts // 获取天气预报数据

//err 正确时返回 null
//data 返回天气预报数据，返回数据见下表

  });

});

}

最后就是切换城市中的input框的实现；

<div v-show="state.isVisible" >

      <input id="newCity" @keydown.enter="handle" type="text" v-model="state.newCity" placeholder="请输入你要查询的城市">

</div>

添加以一个v-show方法，然后绑定一个键盘敲击事件触发handle，并用v-model获取输入的数据并将其存储到state.newCity。

const handle = () => {
state.isVisible =!state.isVisible    // 回车键将框不显示
state.city = state.newCity    // 城市变为输入的城市

  getWeather(AMap)   // 重新获取该城市天气以及该城市未来天气

}


const toggle = () => {
state.isVisible =!state.isVisible   // 使得点击切换城市框会显示和消失

}

以上就是实现获取定位城市，该城市的实时天气，以及未来三天的天气预测，切换查询其它城市的功能具体代码了。

总结

以上使用了Vue.js 组件化的方式来构建界面，利用高德地图 API 获取定位和天气数据，利用 Vue 的响应式机制来实时更新页面数据，通过使用官方文档中 AMapLoader 加载高德地图的JS API，使得我们能高效处理地图相关功能，希望这个小 demo 能够对你的前端开发有所帮助，同时记得给文章点点赞哦🤗。