高德地图 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();
}

效果