高德地图之地图的生命周期

创建地图

new出的map对象具有的 Map 方法，接受两个参数，元素和传入的地图属性。

var map = new AMap.Map('container', {
  resizeEnable: true, // 是否监控地图容器尺寸变化
  zoom: 11, // 初始化地图层级
  center: [116.397428, 39.90923] // 初始化地图中心点
});
复制代码

加载完成

map.on()方法，在加载完后触发

map.on('complete', function () {
  console.log('地图加载完成');
})
复制代码

3. 地图的销毁与创建可以通过两个函数完成

function createMap() {
  map = new AMap.Map('container', {
    resizeEnable: true
  });
  log.success('创建地图成功');
}
// 销毁地图 方法
function destroyMap() {
  map && map.destroy();
  log.info('地图已销毁');
}
复制代码

异步加载

可以通过异步加载 src 的形式执行创建 map 的函数

// 创建地图方法
function onApiLoaded() {
  var map = new AMap.Map('container', {
    center: [117.000923, 36.675807],
    zoom: 6
  });
  map.plugin(["AMap.ToolBar"], function() {
    map.addControl(new AMap.ToolBar());
  });
}
复制代码

// 在 src 中的 url 后面跟上一个callback 实现异步加载
var url = 'https://webapi.amap.com/maps?v=1.4.14&key=405560494e37e6ddfcc808fe0c4fe170&callback=onApiLoaded';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
复制代码

转载于:https://juejin.im/post/5cce7bfc51882541e40e47b9