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中引入其餘第三方在線庫，基本上是同理的。