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