地图的生命周期 | 地图 JS SDK | 开发支持

创建地图对象

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

HTML

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

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

JavaScript

                    // 构造地图对象的方法一：使用地图容器ID创建
                    nimap.accessToken = "您的AK"
                    var map = new nimap.Map({
                        container: 'map',
                    });

创建地图常用参数

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

JavaScript

                    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,黑体" //字体本地读取
                    };
                    nimap.accessToken = "您的AK"
                    var map = new nimap.Map(mapOpts);

                    // 通过map.scrollZoom对象里的方法设置滚动缩放
                    // map.scrollZoom.enable()

创建多个地图

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

HTML

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

JavaScript

                    nimap.accessToken = "您的AK"
                    var map1 = new nimap.Map({
                        container: 'map1',
                    });
                    var map2 = new nimap.Map({
                        container: 'map2',
                    });

地图加载完成

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

JavaScript

                    map.on('load', function(){
                        console.log('地图加载完成')
                    });

销毁地图对象

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

JavaScript

                    // 销毁地图，并清空地图容器
                    map.remove();