1. 程式人生 > >高德地圖 js api(一)載入

高德地圖 js api(一)載入

 

 

 

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

效果