Map Life Cycle
The map object life cycle is divided into three parts: creation, presence, and destruction.
Create a map object
First, prepare an HTML container and set the width and height.
<div id="map" style="width:500px; height:300px"></div>
Then, construct an instance of the Map class.
// Method of constructing a map object: Create with a map container ID
nimap.accessToken="your AK";
var map = new nimap.Map({
container: 'map',
});
Create map common parameters
When creating a Map class instance, you can set the initial state of the map by passing in the map initialization parameters.
var mapOpts = {
container: 'map',
style: '${mapStyle}',
trackResize: false, // whether to monitor the map container size change, the default value is true
dragPan: false, // Whether the map can be panned by mouse, the default is true
Keyboard: false, // map can be controlled by the keyboard, the default is true
doubleClickZoom: false, // Whether the map can zoom in on the map by double-clicking the mouse, the default is true
scrollZoom: false, // Whether the map can be scaled by scrolling, the default value is true
dragRotate: false, // Whether the map can be rotated, the default is true
localIdeographFontFamily: "PingFang SC, Microsoft YaHei, Microsoft Yahei, Arial, sans-serif, bold" // Font local read
};
var map = new nimap.Map(mapOpts);
// Set the scroll zoom by the method in the map.scrollZoom object
// map.scrollZoom.enable()
Create multiple maps
To create multiple maps, just load the JS SDK once. Multiple map objects can be created by adding multiple HTML containers.
<div id="map1" style="width:500px; height:300px"></div>
<div id="map2" style="width:500px; height:300px"></div>
var map1 = new nimap.Map({
container: 'map1',
});
var map2 = new nimap.Map({
container: 'map2',
});
Map loading completed
After creating the map object, the map resource is loaded, and the load event is triggered after the map is loaded.
map.on('load', function(){
Console.log('map loading completed')
});
Destroy map objects
Invoke the remove method to destroy the map. After the method is executed, the map object is logged out, the memory is released, and the map container is emptied.
// destroy the map and empty the map container
map.remove();