高德地圖之地圖的生命週期

建立地圖

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);
複製代碼