地图的生命周期
地图对象生命周期分为三个部分：创建、存在和销毁。
创建地图对象
首先，准备一个HTML容器，设置好宽和高。
<div id="map" style="width:500px; height:300px"></div>
然后，构造一个Map类的实例。
// 构造地图对象的方法一：使用地图容器ID创建
var map = new xtal.Map({
container: 'map',
});
创建地图常用参数
创造Map类实例时，可通过传入地图初始化参数来设置地图的初始状态。
var mapOpts = {
container: 'map',
style: '${mapStyle}',
trackResize: false, //是否监控地图容器尺寸变化，默认值为true
dragPan: false, // 地图是否可通过鼠标拖拽平移，默认为true
keyboard: false, //地图是否可通过键盘控制，默认为true
doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
scrollZoom: false, //地图是否可通过滚动缩放，默认值为true
dragRotate: false, // 地图是否可旋转，默认为true
localIdeographFontFamily: "PingFang SC,Microsoft YaHei,微软雅黑,Arial,sans-serif,黑体" //字体本地读取
};
var map = new xtal.Map(mapOpts);
// 通过map.scrollZoom对象里的方法设置滚动缩放
// map.scrollZoom.enable()
创建多个地图
创建多个地图只需加载一次JS SDK。通过增加多个HTML容器，可创建多个地图对象。
<div id="map1" style="width:500px; height:300px"></div>
<div id="map2" style="width:500px; height:300px"></div>
var map1 = new xtal.Map({
container: 'map1',
});
var map2 = new xtal.Map({
container: 'map2',
});
地图加载完成
创建地图对象后，开始加载地图资源，地图加载完成后触发load事件。
map.on('load', function(){
console.log('地图加载完成')
});