這篇文章主要介紹了vue使用高德地圖實(shí)現(xiàn)實(shí)時(shí)天氣預(yù)報(bào)功能,根據(jù)定位功能，使用高德地圖實(shí)現(xiàn)定位當(dāng)前城市的天氣預(yù)報(bào)功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

JSAPI 的加載

JS API 2.0 版本提供了兩種方案引入地圖 JSAPI：

1. 使用官網(wǎng)提供的 JSAPI Loader 進(jìn)行加載；

2. 以常規(guī) JavaScript 腳本的方式加載；

注意：為避免地圖數(shù)據(jù)協(xié)議和前端資源不匹配導(dǎo)致頁面運(yùn)行報(bào)錯(cuò)，只允許在線加載 JSAPI，禁止進(jìn)行本地轉(zhuǎn)存、與其它代碼混合打包等用法。

使用 JSAPI Loader (推薦)

JSAPI Loader是我們提供的 API 加載器，可幫助開發(fā)者快速定位、有效避免加載引用地圖 JSAPI 各種錯(cuò)誤用法，具有以下特性：

來說明下上面的案例的問題：為什么此時(shí)圖標(biāo)就無法粘性定位了，主要是因?yàn)樗ㄗ釉兀┎恢酪阅莻€(gè)父元素的滾動(dòng)為準(zhǔn)(現(xiàn)在有兩個(gè)父級元素都產(chǎn)生了滾動(dòng))，所以我們要對一層層祖級元素檢查看是否有overflow屬性如果有將元素設(shè)置 overflow: visible； body {overflow: visible； }；簡單理解：兩個(gè)父級body 和div.main 如果同高度寬度的話，子元素就不知道到底以父元素為主，就會出現(xiàn)無法粘性定位的支持以普通JS 和 npm包兩種方式使用；
有效避免錯(cuò)誤異步加載導(dǎo)致的 JSAPI 資源加載不完整問題；
對于加載混用多個(gè)版本 JSAPI 的錯(cuò)誤用法給予報(bào)錯(cuò)處理；
對于不合法加載引用 JSAPI 給予報(bào)錯(cuò)處理；
支持指定 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為代理請求固定前綴，不可省略或修改。（注意您這個(gè)設(shè)置必須是在加載loader.js的腳本引入之前進(jìn)行設(shè)置，否則設(shè)置無效。）

項(xiàng)目代碼步驟：

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、實(shí)現(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 時(shí)必填
          // version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(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)建天氣查詢實(shí)例
            let weather = new AMap.Weather();
            //執(zhí)行實(shí)時(shí)天氣信息查詢
            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ù)手機(jī)定位獲取當(dāng)前天氣功能，或者可以實(shí)現(xiàn)切換城市獲取天氣。

mounted(){
     this.loadWeather("武漢");//高德天氣
}

文檔查看：天氣-服務(wù)-教程-地圖 JS API v2.0 | 高德地圖API

到此這篇關(guān)于vue使用高德地圖實(shí)現(xiàn)實(shí)時(shí)天氣預(yù)報(bào)功能的文章就介紹到這了,更多相關(guān)vue實(shí)時(shí)天氣預(yù)報(bào)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: