vue使用高德地圖實現(xiàn)實時定位天氣預(yù)報功能
更新時間：2022年05月31日 16:06:48 作者：船長在船上
這篇文章主要介紹了vue使用高德地圖實現(xiàn)實時天氣預(yù)報功能,根據(jù)定位功能，使用高德地圖實現(xiàn)定位當(dāng)前城市的天氣預(yù)報功能，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
實現(xiàn)效果：
需求：根據(jù)定位功能，使用高德地圖實現(xiàn)定位當(dāng)前城市的天氣預(yù)報功能。
JSAPI 的加載
JS API 2.0 版本提供了兩種方案引入地圖 JSAPI：
1. 使用官網(wǎng)提供的 JSAPI Loader 進行加載；
2. 以常規(guī) JavaScript 腳本的方式加載；
注意：為避免地圖數(shù)據(jù)協(xié)議和前端資源不匹配導(dǎo)致頁面運行報錯，只允許在線加載 JSAPI，禁止進行本地轉(zhuǎn)存、與其它代碼混合打包等用法。
使用 JSAPI Loader (推薦)
JSAPI Loader是我們提供的 API 加載器，可幫助開發(fā)者快速定位、有效避免加載引用地圖 JSAPI 各種錯誤用法，具有以下特性：
- 來說明下上面的案例的問題：為什么此時圖標(biāo)就無法粘性定位了，主要是因為它（子元素）不知道以那個父元素的滾動為準(zhǔn)(現(xiàn)在有兩個父級元素都產(chǎn)生了滾動)，所以我們要對一層層祖級元素檢查看是否有overflow屬性如果有將元素設(shè)置 overflow: visible； body {overflow: visible； }； 簡單理解：兩個父級body 和div.main 如果同高度寬度的話，子元素就不知道到底以父元素為主，就會出現(xiàn)無法粘性定位的支持以 普通JS 和 npm包 兩種方式使用；
- 有效避免錯誤異步加載導(dǎo)致的 JSAPI 資源加載不完整問題；
- 對于加載混用多個版本 JSAPI 的錯誤用法給予報錯處理；
- 對于不合法加載引用 JSAPI 給予報錯處理；
- 支持指定 JSAPI 版本；
- 支持插件加載；
- 允許多次執(zhí)行加載操作，網(wǎng)絡(luò)資源不會重復(fù)請求，便于大型工程模塊管理；
- 支持IE9以上的瀏覽器，不支持IE8以下
注意（您在2021年12月02日申請以后的key需要配合您的安全密鑰一起使用）
JSAPI key和安全密鑰的使用
JSAPI key搭配代理服務(wù)器并攜帶安全密鑰轉(zhuǎn)發(fā)（安全）
1) 引入 JSAPI 使用 Loader 之前增加代理服務(wù)器設(shè)置腳本標(biāo)簽，設(shè)置代理服務(wù)器域名或地址，將下面示例代碼中的「您的代理服務(wù)器域名或地址」替換為您的代理服務(wù)器域名或ip地址，其中_AMapService為代理請求固定前綴，不可省略或修改。 （注意您這 個設(shè)置必須是在加載loader.js的腳本引入之前進行設(shè)置，否則設(shè)置無效。）
項目代碼步驟：
1、在index.html頁面body中添加密鑰
.......
<body>
<noscript>
<strong>We're sorry but map-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
// serviceHost:'您的代理服務(wù)器域名或地址/_AMapService',
securityJsCode:"xxxxxx"http://申請的密鑰
}
</script>
</body>
......2、安裝@amap/amap-jsapi-loader 使用
npm i @amap/amap-jsapi-loader --save
頁面引入：
import AMapLoader from "@amap/amap-jsapi-loader";
3、實現(xiàn)代碼：
當(dāng)前截取的代碼是天氣部分
...
<div class="header-content flex align-items">
<!-- <img src="../../assets/img/index_03.png"/> -->
<span class="header-left-txt" id="weather" v-if="weatherObj.nightWeather!=weatherObj.dayWeather">
{{weatherObj.nightWeather}}轉(zhuǎn){{weatherObj.dayWeather}}
{{weatherObj.nightTemp?weatherObj.nightTemp+"°C":""}}<i v-show="weatherObj.dayTemp">-</i>{{weatherObj.dayTemp?weatherObj.dayTemp+"°C":""}}
</span>
<span class="header-left-txt" id="weather" v-else>
{{weatherObj.dayWeather}}
{{weatherObj.nightTemp?weatherObj.nightTemp+"°C":""}}<i v-show="weatherObj.dayTemp">-</i>{{weatherObj.dayTemp?weatherObj.dayTemp+"°C":""}}
</span>
<!-- <van-icon name="arrow-down" color="#fff" size="14px" class="ml10"/> -->
</div>
...// 天氣
weatherObj:{
nightTemp:"",//夜間溫度,
dayTemp:"",//白天溫度
dayWeather:"",//白天天氣
nightWeather:"",//夜間天氣
}// 天氣
loadWeather(city) {
return new Promise((reslove, reject) => {
AMapLoader.load({
key: "xxxxx", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
// version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: ["AMap.Weather"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
// 是否加載 AMapUI，缺省不加載
version: "1.1", // AMapUI 缺省 1.1
plugins: [] // 需要加載的 AMapUI ui插件
}
}).then(AMap => {
//創(chuàng)建天氣查詢實例
let weather = new AMap.Weather();
//執(zhí)行實時天氣信息查詢
weather.getForecast(city?city:"武漢市", (err, data)=> {
// console.log(err, data);
if(data.info=="OK"){
let forecasts = data.forecasts[0];
this.weatherObj = forecasts;
console.log(this.weatherObj,"天氣")
}else{
console.log("獲取天氣失敗");
}
});
reslove();
})
.catch(e => {
console.log(e, "高德地圖加載失敗");
reject(e);
});
});
}可以根據(jù)手機定位獲取當(dāng)前天氣功能，或者可以實現(xiàn)切換城市獲取天氣。
mounted(){
this.loadWeather("武漢");//高德天氣
}文檔查看：天氣-服務(wù)-教程-地圖 JS API v2.0 | 高德地圖API
到此這篇關(guān)于vue使用高德地圖實現(xiàn)實時天氣預(yù)報功能的文章就介紹到這了,更多相關(guān)vue實時天氣預(yù)報內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要還是針對 Vue.js 2.x 版本，畢竟接下來一段時間，Vue.js 2.x 還是我們工作中的主流版本，對vue.js性能優(yōu)化技巧相關(guān)知識感興趣的朋友一起看看吧2021-09-09
在 Vue3 中,setup 函數(shù)是一個新引入的概念,它代替了之前版本中的 data、computed、methods 等選項,用于設(shè)置組件的初始狀態(tài)和邏輯,本文將主要介紹Setup的基本用法和少量原理2024-02-02
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue.js是現(xiàn)在比較優(yōu)秀的Web前端框架,非常推薦大家入門學(xué)習(xí),這篇文章主要給大家介紹了關(guān)于如何一步步從零搭建一個Vue項目的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)天氣預(yù)報小應(yīng)用，查詢一些城市的天氣情況，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
本篇文章主要介紹了vue使用Axios做ajax請求詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了Vue中computed和watch有哪些區(qū)別，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue.js+cube-ui（Scroll組件）實現(xiàn)類似頭條效果的橫向滾動導(dǎo)航條
這篇文章主要介紹了Vue.js+cube-ui（Scroll組件）實現(xiàn)類似頭條效果的橫向滾動導(dǎo)航條，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-06-06
這篇文章主要為大家介紹了Vue組件高級通訊之$children與$parent，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
avue-crud多級復(fù)雜的動態(tài)表頭的實現(xiàn)示例
Avue.js?是基于現(xiàn)有的element-ui庫進行的二次封裝，本文主要介紹了avue-crud多級復(fù)雜的動態(tài)表頭，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12