vue項目中，高德地圖使用。

引入vue中。異步導入vue中。

gaoDe(key) {

window.onApiLoaded = function () {

var map = new AMap.Map('container', {

resizeEnable: true,

center: [113.951955, 22.530825],

zoom: 16

});

}

var url = `https://webapi.amap.com/maps? v=1.4.15&key=${key}&callback=onApiLoaded`;

var jsapi = document.createElement('script');

jsapi.charset = 'utf-8';

jsapi.src = url;

document.head.appendChild(jsapi);

mounted() {

this.gaoDe('key');

},

在vue組件中使用，直接寫在mouted中會出現AMap未定義的報錯！

目前，個人是使用定時器解決的。

// 地圖接口API

mapCom() {

let _this = this;

window.onLoad = function () {

var map = new AMap.Map('mapBox', {

resizeEnable: true,

center: [113.951955, 22.530825],

zoom: 16

});

// console.log( _this.mapArray);

// 渲染坐標

// console.log(_this.status==false)

setTimeout(() => {

if (_this.status == false) {

return;

}

// console.log(_this.mapArray);

_this.mapArray.forEach(item => {

// console.log(item)

var marker = new AMap.Marker({

map: map,

icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",

position: item,

offset: new AMap.Pixel(-10, -30)

});

})

}, 1000)

// console.log(_this.mapArray);

map.plugin(["AMap.ToolBar"], function () {

map.addControl(new AMap.ToolBar());

});

}

var url = `https://webapi.amap.com/maps?v=1.4.15&key=91d89e79a544b9ab37aa0147aec9bd0a&callback=onLoad`;

var jsapi = document.createElement('script');

jsapi.charset = 'utf-8';

jsapi.src = url;

document.head.appendChild(jsapi);

},