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);
},