高德地图 JS API 的生命周期

地图对象生命周期分为三个部分：创建、存在和销毁， 本章向您介绍地图完整的生命周期过程，包括：

1. 创建地图对象
2. 地图加载完成
3. 销毁地图对象

创建地图对象

创建一个地图

首先，准备一个HTML容器，设置好宽和高。

<!-- html 部分 -->
<div id="container" style="width:500px; height:300px"></div>

然后，构造一个Map类的实例。

<!--JavaScript 部分 -->

// 构造地图对象的方法一：使用地图容器ID创建
var map = new AMap.Map('container');
// 构造地图对象的方法二：使用地图容器对象创建
var map = new AMap.Map(document.getElementById("container"));

创建地图常用参数

创造Map类实例时，可通过传入地图初始化参数来设置地图的初始状态。

<!-- JavaScript 部分 -->
var map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],//设置地图中心点坐标
    layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D',  //设置地图模式
    lang:'zh_cn',  //设置地图语言类型
});

创建多个地图

创建多个地图只需加载一次JS API。通过增加多个HTML容器，可创建多个地图对象。

<!-- html 部分 -->
<div id="containerOne" style="width:500px; height:300px"></div>
<div id="containerTwo" style="width:500px; height:300px"></div>
<!-- JavaScript 部分 -->
// 创建多个地图对象
var mapOne = new AMap.Map('containerOne');
var mapTwo = new AMap.Map('containerTwo');

地图加载完成

创建地图对象后，开始加载地图资源，地图加载完成后触发complete事件。

<!-- JavaScript 部分 -->
map.on('complete', function(){
    // 地图图块加载完成后触发
});

销毁地图对象

调用destroy方法来销毁地图。该方法执行后，地图对象被注销，内存释放，地图容器被清空。

<!-- JavaScript 部分 -->
// 销毁地图，并清空地图容器
map.destroy( );