高德地圖 js api(一)載入
阿新 • • 發佈:2018-12-13
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();
}
效果