vue使用高德地圖實現(xiàn)實時定位天氣預報功能
實現(xiàn)效果：
需求：根據(jù)定位功能，使用高德地圖實現(xiàn)定位當前城市的天氣預報功能。
JSAPI 的加載
JS API 2.0 版本提供了兩種方案引入地圖 JSAPI：
1. 使用官網(wǎng)提供的 JSAPI Loader 進行加載；
2. 以常規(guī) JavaScript 腳本的方式加載；
注意：為避免地圖數(shù)據(jù)協(xié)議和前端資源不匹配導致頁面運行報錯，只允許在線加載 JSAPI，禁止進行本地轉(zhuǎn)存、與其它代碼混合打包等用法。
使用 JSAPI Loader (推薦)
JSAPI Loader是我們提供的 API 加載器，可幫助開發(fā)者快速定位、有效避免加載引用地圖 JSAPI 各種錯誤用法，具有以下特性：
- 來說明下上面的案例的問題：為什么此時圖標就無法粘性定位了，主要是因為它（子元素）不知道以那個父元素的滾動為準(現(xiàn)在有兩個父級元素都產(chǎn)生了滾動)，所以我們要對一層層祖級元素檢查看是否有overflow屬性如果有將元素設置 overflow: visible； body {overflow: visible； }； 簡單理解：兩個父級body 和div.main 如果同高度寬度的話，子元素就不知道到底以父元素為主，就會出現(xiàn)無法粘性定位的支持以 普通JS 和 npm包 兩種方式使用；
- 有效避免錯誤異步加載導致的 JSAPI 資源加載不完整問題；
- 對于加載混用多個版本 JSAPI 的錯誤用法給予報錯處理；
- 對于不合法加載引用 JSAPI 給予報錯處理；
- 支持指定 JSAPI 版本；
- 支持插件加載；
- 允許多次執(zhí)行加載操作，網(wǎng)絡資源不會重復請求，便于大型工程模塊管理；
- 支持IE9以上的瀏覽器，不支持IE8以下
注意（您在2021年12月02日申請以后的key需要配合您的安全密鑰一起使用）
JSAPI key和安全密鑰的使用
JSAPI key搭配代理服務器并攜帶安全密鑰轉(zhuǎn)發(fā)（安全）
1) 引入 JSAPI 使用 Loader 之前增加代理服務器設置腳本標簽，設置代理服務器域名或地址，將下面示例代碼中的「您的代理服務器域名或地址」替換為您的代理服務器域名或ip地址，其中_AMapService為代理請求固定前綴，不可省略或修改。 （注意您這 個設置必須是在加載loader.js的腳本引入之前進行設置，否則設置無效。）
項目代碼步驟：
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:'您的代理服務器域名或地址/_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)代碼：
當前截取的代碼是天氣部分
...
<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 的版本，缺省時默認為 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ù)手機定位獲取當前天氣功能，或者可以實現(xiàn)切換城市獲取天氣。
mounted(){
this.loadWeather("武漢");//高德天氣
}文檔查看：天氣-服務-教程-地圖 JS API v2.0 | 高德地圖API
到此這篇關(guān)于vue使用高德地圖實現(xiàn)實時天氣預報功能的文章就介紹到這了,更多相關(guān)vue實時天氣預報內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了關(guān)于axios的proxy代理配置解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Sass是一種CSS預處理器,它擴展了CSS的功能,提供了更高級的語法和特性,例如變量、嵌套、混合、繼承和顏色功能等,這些特性可以幫助開發(fā)者更高效地管理和維護樣式表,本文介紹vue3中安裝并使用CSS預處理器Sass的方法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細介紹了基于Vue實現(xiàn)手勢簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vue項目中使用Hbuilder打包app 設置沉浸式狀態(tài)欄的方法
這篇文章主要介紹了vue項目 使用Hbuilder打包app 設置沉浸式狀態(tài)欄的方法，本文通過實例代碼效果圖展示給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
react+vite動態(tài)導入報錯@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導入報錯@vite-ignore的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3使用el-form嵌套el-table進行單條數(shù)據(jù)的表單校驗功能
在實際開發(fā)過程中,我們經(jīng)常需要處理表格中的表單數(shù)據(jù),比如在編輯表格中的某一行數(shù)據(jù)時進行校驗,本文給大家介紹了Vue3使用el-form嵌套el-table進行單條數(shù)據(jù)的表單校驗功能,文中有相關(guān)的代碼供大家參考,需要的朋友可以參考下2024-08-08
解決vant的Toast組件時提示not defined的問題
這篇文章主要介紹了解決vant的Toast組件時提示not defined的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題
這篇文章主要介紹了Vue獲取HTMLCollection列表的children時結(jié)果為undefined問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
mixins是一種分發(fā) Vue 組件中可復用功能的使用方式,它是一個 js 對象,包含我們組件script中的任意功能選項,下面就跟隨小編一起來看看它的具體使用吧2024-03-03