vue-amap踩坑記錄：AMap對象獲取不到?

vue-amap使用

  • 在項(xiàng)目目錄下執(zhí)行npm install vue-amap --save
  • 在vue的index.js文件中加入
import AMap from 'vue-amap';
Vue.use(AMap);

// 初始化vue-amap
AMap.initAMapApiLoader({
  // 申請的高德key
  key: 'e8496e8ac4b0f01100b98da5bde96597',
  // 插件集合，根據(jù)自己的需求選擇插件（我是想用來定位獲取cityCode，所以使用AMap.Geolocation插件）
  plugin: ['AMap.Geolocation']
});
  • 在相應(yīng)的vue文件中，進(jìn)行定位操作
getLocation() {
  return new Promise((resolve, reject) => {
    if (sessionStorage.addressComponent) {
      // 如果sessionStorage中緩存，則直接取出，不需要重新定位
      let addressComponent = JSON.parse(sessionStorage.addressComponent)
      resolve(addressComponent)
    } else {
      // sessionStorage中沒有緩存，則開始定位
      AMap.service(['AMap.Geolocation'], () => {
        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: false, //是否使用高精度定位，默認(rèn):true
          timeout: 5000 //超過5秒后停止定位，默認(rèn)：無窮大
        })
        //  獲取位置信息
        geolocation.getCurrentPosition()
        // 獲取位置信息完成觸發(fā)事件
        AMap.event.addListener(geolocation, 'complete', function onComplete(data) {
          if (data.addressComponent) {
            console.log('位置從定位中得到', data.addressComponent)
            // 獲取定位之后，存入sessionStorage中
            sessionStorage.addressComponent = JSON.stringify(
              data.addressComponent
            )
            resolve(data.addressComponent)
          } else {
            console.log('定位失敗')
            reject('Opps，未獲取到您的位置信息！')
          }
        })
         // 獲取位置信息失敗觸發(fā)事件
        AMap.event.addListener(geolocation, 'error', function onComplete(
          data
        ) {
          console.log('定位失敗')
          reject('Opps，未獲取到您的位置信息！')
        })
      })
    }
  }) 
},

踩坑記錄（敲黑板，畫重點(diǎn)）

  • 很奇怪，在index.js文件中寫了下面的代碼后，在移動端打開頁面一直在轉(zhuǎn)圈，就是獲取不到位置信息，但是在pc端chrome瀏覽器中就可以獲取到位置信息并且代碼執(zhí)行的很好，but。。。
import AMap from 'vue-amap';
Vue.use(AMap);
  • 定位了半天發(fā)現(xiàn)是在vue文件中AMap這個(gè)對象獲取不到，what？在index.js文件中不是已經(jīng)引入了vue-amap了嗎？為啥獲取不到？
  • 繼續(xù)定位問題，發(fā)現(xiàn)在vue中的<head>中出現(xiàn)了這樣的一行
    <script type="text/javascript" async defer src="https://webapi.amap.com/maps?key=fb0f7179dfe9485a104e556b4173a7bc&v=1.4.4&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor"></script>
  • 相信各位都發(fā)現(xiàn)問題了，Vue.use()之后，發(fā)現(xiàn)轉(zhuǎn)化后是defer執(zhí)行的。（延遲執(zhí)行腳本）
  • 解決
    既然Vue.use()加載vue-amap是defer延遲執(zhí)行腳本，那我們就用script標(biāo)簽引入腳本，加載完成之后再繼續(xù)執(zhí)行接下來的代碼吧。
  1. 將index.js文件中的全部刪除，在index.html的<head>標(biāo)簽中加入（去掉async defer）
    <script type="text/javascript" src="https://webapi.amap.com/maps?key=fb0f7179dfe9485a104e556b4173a7bc&v=1.4.4&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor"></script>
  2. 在vue文件中執(zhí)行訪問AMap對象不會出錯(cuò)（vue文件中代碼不變）

感謝您的view，留個(gè)贊再走唄

  • 感謝瀏覽姑娘的文章，來自一個(gè)寫前端的姑娘！
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容