示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 教程 > 地图 > 地图生命周期 >

高德 开发 地图 JS API 教程 地图 地图生命周期

更新时间:2018年05月28日

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

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

创建地图对象

创建一个地图

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


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

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

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

创建地图常用参数

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

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容器,可创建多个地图对象。

<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');


地图加载完成

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

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

销毁地图对象

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

// 销毁地图,并清空地图容器
map.destroy( );


移动端
示例中心
功能
在线体验
常见问题