Map status

This article introduces common methods for setting and obtaining map status, including:

1. Map center point and zoom level
2. Adjust the view according to the range of the overlay

1、Set and get the map center point and zoom level

1.1 Set the map center pointsetCenter()

var position = new AMap.LngLat(100.491422, 13.749313); //Pass in latitude and longitude
//var position = [100.491422, 13.749313]; //Another way of writing
map.setCenter(position); //Shortcut: Set map center point
//map.setCenter(position, false, 2000); //Another way of writing

The setCenter(center, immediately, duration) method has the transition animation effect enabled by default. If you want to disable the animation or have custom requirements for the animation, you can use the following parameters:

center:The coordinates of the center point of the map.

immediately:Whether to immediately jump to the target location (set to true to jump immediately. When false, it will smoothly transition to the target location over a period of time).

duration:Animation transition duration, in milliseconds (ms), this parameter can be used to control the speed of the animation transition (this parameter takes effect only when the immediately parameter is false).

1.2 Get the center point of the mapgetCenter()

var map = new AMap.Map("container", {
  center: [100.491422, 13.749313],
});
var currentCenter = map.getCenter().toJSON(); //Get the center point of the map
console.log(currentCenter); //Output[100.491422, 13.749313]

var position = new AMap.LngLat(100.491422, 13.749313); //Pass in Latitude and Longitude
map.setCenter(position); 
map.on("moveend", function () {
  var currentCenter = map.getCenter().toJSON(); //Get Map Center Point
  console.log(currentCenter); //Output[100.491422, 13.749313]
});

1.3 Set the map zoom levelsetZoom()

//Set the map zoom level, the level is a number.
map.setZoom(13); //The zoom parameter can be set in the range: [2, 20].
//map.setZoom(13, false, 2000); //Another way of writing

The setZoom(zoom, immediately, duration) method has default transition animation effects enabled. If you want to disable the animation or customize the animation, you can use the following parameters:

zoom:The zoom level of the map.

immediately:Whether to immediately jump to the target level (set to true means it will jump immediately. When false, it will smoothly transition to the target level over a period of time).

duration:The duration of the animation transition, in milliseconds (ms). This parameter can be used to control the speed of the animation transition (this parameter only takes effect when immediately is false).

1.4 Get Map Zoom LevelgetZoom()

var map = new AMap.Map("container", {
  zoom: 11, //Map Level
});
var currentZoom = map.getZoom(); //Get map level
console.log(currentZoom); //Output 11

map.setZoom(13); //Set map level
map.on("zoomend", function () {
  var currentZoom = map.getZoom(); //Get map level
console.log(currentZoom); //Output 13
});

1.5 Set the map center point and zoom level at the same timesetZoomAndCenter()

//Pass in the zoom level and the latitude and longitude of the center point at the same time
map.setZoomAndCenter(14, [100.491422, 13.749313]); 
//map.setZoomAndCenter(14, [100.491422, 13.749313], false, 2000); //Another way of writing

The setZoomAndCenter(zoom, center, immediately, duration) method has transition animation effects enabled by default. If you want to turn off the animation or have custom requirements for the animation, you can use the following parameters:

zoom:The zoom level of the map.

center:The coordinates of the center point of the map.

immediately:Whether to jump to the target level and center point coordinates immediately (when set to true, it will jump immediately. When false, it will smoothly transition to the target level and center point coordinates over a period of time).

duration:The duration of the animation transition, in milliseconds (ms), this parameter can be used to control the speed of the animation transition (this parameter takes effect only when immediately is false).

2、Adjust the view based on the coverage area

Based on the distribution of overlays on the map, use the setFitView() method to automatically zoom the map to an appropriate view level to ensure all overlays are within the view.

var path = [
  new AMap.LngLat("100.467389", "13.817001"),
  new AMap.LngLat("100.466703", "13.730304"),
  new AMap.LngLat("100.582059", "13.710292"),
  new AMap.LngLat("100.606778", "13.816334"),
];
var polyline = new AMap.Polyline({
  path: path,
  borderWeight: 2, //Line width, default is 1
  strokeColor: "red", //Line color
  lineJoin: "round", //Style of the connection point at the polyline corner
});
map.add(polyline);

//Create two point markers
var marker1 = new AMap.Marker({
  position: new AMap.LngLat(100.474256, 13.76565), //Latitude and Longitude Object
});
var marker2 = new AMap.Marker({
  position: new AMap.LngLat(100.571073, 13.718964),
});
map.add(marker1);
map.add(marker2);

//No parameters, by default includes all overlays
map.setFitView();
//Pass in the overlay array, including only polyline and marker1 within the map view, marker2 is not within the map view
map.setFitView([polyline, marker1]); //Abbreviation
map.setFitView([polyline, marker1], false, [60, 60, 60, 60], 12); //Complete notation

The setFitView(overlays, immediately, avoid, maxZoom) method accepts 4 parameters, all of which can be optional.

overlays:Overlays displayed on the map view.

immediately:Whether an animation process is needed.

avoid:The pixel avoidance width for top, bottom, left, and right.

maxZoom:The maximum zoom level of the map.

3、Description of properties and methods involved in this chapter

3.1 AMap.Map