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']
});
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中的<head>中出现了这样的一行
<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>
- 相信各位都发现问题了，Vue.use()之后，发现转化后是defer执行的。（延迟执行脚本）
- 解决
既然Vue.use()加载vue-amap是defer延迟执行脚本，那我们就用script标签引入脚本，加载完成之后再继续执行接下来的代码吧。
- 将index.js文件中的全部删除，在index.html的<head>标签中加入（去掉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>
- 在vue文件中执行访问AMap对象不会出错（vue文件中代码不变）
感谢您的view，留个赞再走呗
网友评论