脚本宝典收集整理的这篇文章主要介绍了vue cli3 构建的项目中使用高德地图，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

高德文档

https://lbs.amap.com/api/java...

梳理

首先，我们要加载外部js，在外部js加载完毕，然后初始化地图。

加载外部js

let aMapScript = document.createElement('script')
aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=你的key&plugin=AMap.CitySearch')
document.head.appendChild(aMapScript)

初始化地图

初始化地图的前提是，成功加载外部js，然后使用高德提供的 AMap 对象来构造实例。
判断外部是否加载完毕，aMapScript 对象上有个onload方法，写法如下：

let self = this
let aMapScript = document.createElement('script')
aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=22bcbed32d531383dd420e8f0a6f2325&plugin=AMap.CitySearch')
document.head.appendChild(aMapScript)
aMapScript.onload=function () {
    self.storeMap = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 10,
    });
}

后边的话，基本上在这个回调里边操作就可以了。当然，我们通过this，把构造的地图实例暴露到外部，这样，外部直接修改这个实例。

注意：onload 内部，this指向并不是当前vue 组件，所以需要一个变量传递一下

vue中引入其他第三方在线库，基本上是同理的。

脚本宝典总结

以上是脚本宝典为你收集整理的vue cli3 构建的项目中使用高德地图全部内容，希望文章能够帮你解决vue cli3 构建的项目中使用高德地图所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。