地图生命周期 最后更新时间: 2023年12月12日

开发者可以根据地图对象的生命周期，更好地管理地图对象的创建、使用和销毁，从而提高更好的用户体验和性能优化。本文介绍地图对象的生命周期，分为四个阶段：

1. 创建地图对象
2. 地图加载完成
3. 地图运行阶段
4. 销毁地图对象

1、创建地图对象

在创建地图对象阶段，可通过传入地图初始化参数来设置地图的初始状态。例如：中心点、地图视图模式、地图样式等。

var map = new AMap.Map("container", {
  zoom: 10, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
});

<div id="containerOne" style="width:500px; height:300px"></div>
<div id="containerTwo" style="width:500px; height:300px"></div>

// 创建多个地图对象
var mapOne = new AMap.Map('containerOne');
var mapTwo = new AMap.Map('containerTwo');

2、地图加载完成

地图加载完成后会触发complete事件，可以在这个事件中执行一些地图的其他操作，例如：添加覆盖物、绑定交互事件。根据需求，自动定位到某个城市或显示某些标记点等。

map.on('complete', function(){
  //地图图块加载完成后触发
});

3、地图运行阶段

运行阶段指地图对象加载完成后，地图对象销毁前。在这个阶段，可以对地图进行各种交互操作，例如：缩放、平移、搜索地点等。此外，还可以在地图上添加各种图层和标记，以提供更丰富的地理信息和交互体验。

var map = new AMap.Map("container"); //初始化地图
//在运行阶段添加点标记
const marker = new AMap.Marker({
  position: new AMap.LngLat(116.39, 39.9),
});
//将创建的点标记添加到已有的地图实例：
map.add(marker);
//在运行阶段监听地图的点击事件
const clickHandler = function (e) {
  console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
};
map.on("click", clickHandler);

4、销毁地图对象

不再需要地图或在页面切换时，应销毁地图对象以释放资源。调用map.destroy()方法可销毁地图。在调用map.destroy()方法之前，需要解绑地图上的事件。调用map.destroy()方法后，将地图对象赋值为null，再清除地图容器的 DOM 元素，避免内存泄漏和性能问题。

//解绑地图的点击事件
map.off("click", clickHandler);
//销毁地图，并清空地图容器
map.destroy();
//地图对象赋值为null
map = null
//清除地图容器的 DOM 元素
document.getElementById("container").remove(); //"container" 为指定 DOM 元素的id