版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_23876873/article/details/84305993
1.data中定义key和回调函数
data() {
return {
amapKey: this.$global.key,
map:null,
onMapLoad:'onMapLoad'//地图加载完成,回调的函数
}
},
2.初始化函数,定义在methods中
initMap() {
window[this.onMapLoad] = function(){//-----回调函数名从data中获取
let map = this.map = new AMap.Map('container',{
zoom:10,
// center:[116.39,39.9]
});
AMap.plugin('AMap.ToolBar',function(){//异步加载插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
}
var url = `https://webapi.amap.com/maps?
v=1.4.11&key=${this.key}值&callback=${this.onMapLoad}`;
//----------->key从高度注册获得,omMapLoad地图资源在加载后的回调函数
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
}
key从高度注册获得,
omMapLoad:地图资源在加载后的回调函数,名字随意
3.在生命周期中调用初始化map
mounted(){
this.initMap();
}
效果