前言
本文將學習如何使用Vue.js快速搭建天氣預報界面,了解如何調用高德地圖API獲取所需的天氣數據,并掌握如何將兩者有機結合,實現一個功能豐富、體驗出色的天氣預報應用
無論您是前端新手還是有一定經驗,相信這篇教程都能為您帶來收獲。讓我們一起開始這段精彩的Vue.js + 高德API之旅吧!
效果展示
實時效果展示
可以查看最近幾天的天氣
高德API
要實現實時天氣的獲取，我們需要用到高德地圖的API服務
首先來到高德開放平臺
來到JS API服務
首先需要獲取JS API 安全密鑰，將它引入項目中
<div id="container"></div>
<script type="text/javascript">window._AMapSecurityConfig = {serviceHost: "你的代理服務器域名或地址/_AMapService",//例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',};
</script>
<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=你申請的key值"
></script>
<script type="text/javascript">//地圖初始化應該在地圖容器div已經添加到DOM樹之后var map = new AMap.Map("container", {zoom: 12,});
</script>
接下來我們可以看到這里的天氣服務
這里的服務是通過城市名稱、區域編碼（如杭州市、330100），查詢目標城市、區域的實時天氣狀況。
也就是說我們需要獲取到天氣數據之前的獲取到當前的位置
//加載天氣查詢插件
AMap.plugin("AMap.Weather", function () {//創建天氣查詢實例var weather = new AMap.Weather();//執行實時天氣信息查詢weather.getLive("杭州市", function (err, data) {console.log(err, data);//err 正確時返回 null//data 返回實時天氣數據，返回數據見下表});
});
不難發現這里還有一個位置的服務
有三種定位方式可選擇
我們使用IP定位獲取當前城市信息
接下來我們就要開始在我們的項目中使用了
在index.js中全局引入高德的服務
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "你的代理服務器域名或地址/_AMapService",};</script><scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=你申請的key值"></script></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>創建一個Home.vue
構建獲取天氣的方法
這個方法可以獲取到今天的天氣
const getWeather = (city) => {//加載天氣查詢插件AMap.plugin("AMap.Weather", function () {//創建天氣查詢實例var weather = new AMap.Weather();//執行實時天氣信息查詢weather.getLive(city, function (err, data) {console.log(err, data);state.value = data;console.log(state.value);//err 正確時返回 null//data 返回實時天氣數據，返回數據見下表});});
};
這個方法可以獲取到明天、后天的天氣
const getWeather2 = (city) => {AMap.plugin("AMap.Weather", function () {//創建天氣查詢實例var weather = new AMap.Weather();//執行實時天氣信息查詢weather.getForecast(city, function (err, data) {console.log(err, data);//err 正確時返回 null//data 返回天氣預報數據，返回數據見下表forecasts.value = data.forecasts;console.log(forecasts.value);});});
};
在獲取到位置后調用獲取天氣的方法
() => {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);getWeather(result.city);getWeather2(result.city);}});});
});
之后便是將數據渲染到頁面即可
<div class="container"><div class="nav"><div class="time">{{ now }}</div><div class="city">切換城市</div></div><div class="city-info"><p class="city">{{ state.city }}</p><p class="weather">{{ state.weather }}</p><h2 class="temp"><em>{{ state.temperature }}</em>℃</h2><div class="detail"><span> 風力：四級 </span> | <span> 風向：西北風 </span> |<span> 空氣濕度：98% </span></div></div><div class="future" v-if="forecasts.length"><div class="group">明天：<span class="tm">白天：{{ forecasts[1].dayTemp }}℃ {{ forecasts[1].dayWeather }}{{ forecasts[1].dayWindDir }} {{ forecasts[1].dayWindPower }}</span>明天：<span class="tm">夜間：{{ forecasts[1].nightTemp }}℃ {{ forecasts[1].nightWeather }}{{ forecasts[1].nightWindDir }}{{ forecasts[1].nightWindPower }}</span></div><div class="group">后天：<span class="tm">白天：{{ forecasts[2].dayTemp }}℃ {{ forecasts[2].dayWeather }}{{ forecasts[2].dayWindDir }} {{ forecasts[2].dayWindPower }}</span>后天：<span class="tm">夜間：{{ forecasts[2].nightTemp }}℃ {{ forecasts[2].nightWeather }}{{ forecasts[2].nightWindDir }}{{ forecasts[2].nightWindPower }}</span></div></div></div>
最終我們就能實現一個天氣預報的效果了
我們使用IP定位獲取當前城市信息的原因是因為天氣預報不需要那么精準的位置
官方也介紹了
如果不需要獲取精確的位置，只需要城市級別的定位信息，推薦使用AMap.CitySearch插件，AMap.CitySearch插件獲取所在城市相比通過瀏覽器定位的方式也更快捷。
所以我們采取了這種方式
總結
通過本文的學習,我們成功利用Vue.js和高德地圖API開發了一個實時天氣預報應用
通過這個案例,我們不僅掌握了如何在Vue.js中集成高德地圖API,還學會了如何使用Vue.js提供的各種功能和特性來增強應用的交互性和用戶體驗
希望讀者在學習的過程中有所收獲！！！
為你未來的工作增加動力)
gtest單元測試)
