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

MrNow發表於2019-05-05
地圖

建立地圖

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('地圖載入完成');
})
複製程式碼
  1. 地圖的銷燬與建立可以通過兩個函式完成
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);
複製程式碼

相關文章