地图生命周期 最后更新时间: 2021年01月22日
地图对象生命周期分为三个部分:创建、存在和销毁, 本章向您介绍地图完整的生命周期过程,包括:
- 创建地图对象
- 地图加载完成
- 销毁地图对象
创建地图对象
创建一个地图
首先,准备一个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( );