vue cli3 构建的项目中使用高德地图

共计 795 个字符，预计需要花费 2 分钟才能阅读完成。

高德文档
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 中引入其他第三方在线库，基本上是同理的。