vue-amap踩坑记录：AMap对象获取不到?

vue-amap使用

• 在项目目录下执行npm install vue-amap --save
• 在vue的index.js文件中加入

import AMap from 'vue-amap';
Vue.use(AMap);

// 初始化vue-amap
AMap.initAMapApiLoader({
  // 申请的高德key
  key: 'e8496e8ac4b0f01100b98da5bde96597',
  // 插件集合，根据自己的需求选择插件（我是想用来定位获取cityCode，所以使用AMap.Geolocation插件）
  plugin: ['AMap.Geolocation']
});

• 在相应的vue文件中，进行定位操作

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, //是否使用高精度定位，默认:true
          timeout: 5000 //超过5秒后停止定位，默认：无穷大
        })
        //  获取位置信息
        geolocation.getCurrentPosition()
        // 获取位置信息完成触发事件
        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，未获取到您的位置信息！')
          }
        })
         // 获取位置信息失败触发事件
        AMap.event.addListener(geolocation, 'error', function onComplete(
          data
        ) {
          console.log('定位失败')
          reject('Opps，未获取到您的位置信息！')
        })
      })
    }
  }) 
},

踩坑记录（敲黑板，画重点）

• 很奇怪，在index.js文件中写了下面的代码后，在移动端打开页面一直在转圈，就是获取不到位置信息，但是在pc端chrome浏览器中就可以获取到位置信息并且代码执行的很好，but。。。

import AMap from 'vue-amap';
Vue.use(AMap);

• 定位了半天发现是在vue文件中AMap这个对象获取不到，what？在index.js文件中不是已经引入了vue-amap了吗？为啥获取不到？
• 继续定位问题，发现在vue中的中出现了这样的一行
  
• 相信各位都发现问题了，Vue.use()之后，发现转化后是defer执行的。（延迟执行脚本）
• 解决
  既然Vue.use()加载vue-amap是defer延迟执行脚本，那我们就用script标签引入脚本，加载完成之后再继续执行接下来的代码吧。

1. 将index.js文件中的全部删除，在index.html的标签中加入（去掉async defer）
   
2. 在vue文件中执行访问AMap对象不会出错（vue文件中代码不变）

感谢您的view，留个赞再走呗

• 感谢浏览姑娘的文章，来自一个写前端的姑娘！