Map life cycle

Developers can better manage the creation, use, and destruction of map objects based on the life cycle of the map object, thereby improving better user experience and performance optimization. This article introduces the life cycle of the map object, which is divided into four phases:

1. Create map object
2. Map loading completed
3. Map running phase
4. Destroy map object

1、Create map object

During the map object creation phase, the initial state of the map can be set by passing in map initialization parameters. For example: center point, map view mode, map style, etc.

var map = new AMap.Map("container", {
  zoom: 10, //Map level
  showOversea: true, //Enable world Map
  center: [100.491422, 13.749313],
  layers: [new AMap.TileLayer.Satellite()], //Set layers, can be set as an array containing one or more layers
  mapStyle: "amap://styles/whitesmoke", //Set the display style of the map
  viewMode: "2D", //Set map mode
});

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

// Create multiple map objects
var mapOne = new AMap.Map('containerOne');
var mapTwo = new AMap.Map('containerTwo');

2、Map loading completed

The complete event is triggered after the map is loaded. Within this event, you can perform other map operations, such as adding overlays, binding interactive events. Automatically locate to a city or display certain markers based on requirements.

map.on('complete', function(){
  //Fires after map tiles are loaded
});

3、Map run phase

The run phase refers to the period after the map object is loaded and before it is destroyed. During this phase, various interactive operations can be performed on the map, such as zooming, panning, searching for locations, etc. In addition, various layers and markers can be added to the map to provide richer geographic information and interactive experience.

//Initialize the map
var map = new AMap.Map("container", {
  viewMode: "2D",
  zoom: 11,
  showOversea: true, //Enable world Map
  center: [100.491422, 13.749313],
}); 
//Add point markers during the runtime
const marker = new AMap.Marker({
  position: new AMap.LngLat(100.380185, 13.741309),
});
//Add the created point marker to the existing map instance
map.add(marker);
//Listen to map click events during the runtime
const clickHandler = function (e) {
  console.log('You are at[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]clicked on the map at the location!');
};
map.on("click", clickHandler);

4、Destroy map object

When the map is no longer needed or when switching pages, the map object should be destroyed to release resources. The map can be destroyed by calling the map.destroy() method. Before calling the map.destroy() method, events on the map need to be unbound. After calling the map.destroy() method, set the map object to null and then clear the DOM elements of the map container to avoid memory leaks and performance issues.

//Unbind the click event of the map
map.off("click", clickHandler);
//Destroy the map and clear the map container
map.destroy();
//Set the map object to null
map = null
//Clear the DOM elements of the map container
document.getElementById("container").remove(); //"container" For the id of the specified DOM element