Map

setCenter(center, immediately?, duration?)

Set center point

Parameter:

center([number, number] | LngLat) Latitude and longitude of the center point of the map

immediately(Boolean) Whether to immediately jump to the target position. When set to true, it means an immediate jump. When set to false, it uses animation to smoothly transition to the target position over a period of time. It defaults to false. If the animateEnable property is set to true, this parameter becomes invalid

duration(Number?) If animation is used, the duration of the animation is controlled in milliseconds, with the default value being a dynamically calculated internal value

Demo:

map.setCenter(new AMap.LngLat(100.35169, 13.77499));
// map.setCenter(new AMap.LngLat(100.35169, 13.77499), false, 2000); //Another way of writing

setZoomAndCenter(zoom, center, immediately?, duration?)

Zoom the map to the specified level with the specified point as the display center point

Parameter:

zoom(Number) Zoom level

center(LngLat | [number, number]) Map center point location

immediately(Boolean) Whether to immediately jump to the target position. Setting it to true means it will jump immediately. When set to false, it uses an animation to smoothly transition to the target position over time, defaulting to false if omitted. This parameter becomes invalid if the animateEnable property is set to true

duration(Number?) If using animation for transitions, the duration control of the animation is in milliseconds, with the default being a dynamically calculated internal value

Demo:

map.setZoomAndCenter(12, new AMap.LngLat(100.35169, 13.77499));
// map.setZoomAndCenter(12, new AMap.LngLat(100.35169, 13.77499), false, 2000); //Another way of writing

getBounds()

Get the current map view range/visible area

return value:(Bounds) Boundary latitude and longitude

Demo:

map.getBounds();

getCenter()

Get the latitude and longitude coordinate values of the map center point

return value: (LngLat) Latitude and longitude of the map center point

Demo:

map.getCenter();

setZoom(zoom, immediately, duration?)

Set the zoom level for the map display, the parameter zoom can range from: [2, 30]

Parameter:

zoom(Number) Map zoom level

immediately(Boolean) Whether to immediately jump to the target location. Set to true, it means an immediate jump. When false, it uses animation transition to smoothly move to the target location over a period of time, default can be omitted as false, if the animateEnable property is set to true, this parameter is invalid

duration(Number?) If using animation transition, the duration control of the animation transition, in ms, the default value is a dynamic value automatically calculated internally

Demo:

map.setZoom(12);
// map.setZoom(12, false, 2000); //Another way of writing

getContainer()

Return the container of the map object

return value: (HTMLElement) Map DOM container

Demo:

map.getContainer();

getSize()

Get the map container size, unit: pixels

return value: (Size) Map container size

Demo:

map.getSize();

getZoom(digits)

Get the current map zoom level, default range is [2, 20]

Parameter: digits(Number) Decimal precision of zoom level, default is 2

return value: (Number) Map zoom level

Demo:

map.getZoom(1);

zoomIn()

Zoom in the map by one level

Demo:

map.zoomIn();

addLayer(layer)

Add layer to the map

Parameter:layer(Layer) Map layer object

Demo:

map.addLayer(layer);

zoomOut()

Zoom out the map by one level

Demo:

map.zoomOut();

getPitch()

Get the current pitch angle of the map

return value: (Number) Angle

Demo:

map.getPitch();

setPitch(Pitch, immediately?, duration?)

Set the map pitch angle

Parameter:

Pitch(Number) Angle

immediately(Boolean) Whether to jump to the target position immediately Set to true, it means an immediate jump. When false, it uses animation transition to smoothly transition to the target position over a period of time, defaulting to false. If the animateEnable property is set to true, this parameter becomes invalid

duration(Number?) If using animation transition, the duration control for animation transition is in ms, the default value is a dynamically calculated internal value

Demo:

map.setPitch(30);
// map.setPitch(30, false, 2000); //Another way of writing

getRotation()

Get the clockwise rotation angle of the map, range: [0 ~ 360]

return value: (Number) Rotation angle value

Demo:

map.getRotation();

setRotation(rotation, immediately?, duration?)

Set the clockwise rotation angle of the map, the rotation origin is the center point of the map container

Parameter: 

rotation(Number) Rotation angle, value range: any number

immediately(Boolean) Whether to immediately jump to the target location. Set to true, it will jump immediately. When set to false, it will smoothly transition to the target location over a period of time using animation. It defaults to false, if the animateEnable property is set to true, this parameter becomes invalid

duration(Number?) Animation duration control, the unit is ms, the default value is a dynamic value automatically calculated internally

Demo:

map.setRotation(30);
// map.setRotation(30, false, 2000); //Another way of writing

removeLayer(layer)

Remove layer from the map

Parameter: layer(Layer) Map layer

Demo:

map.removeLayer(layer);

setBounds(bounds, immediately?, avoid?)

Specify the current map display range, the parameter bounds is the specified range

Parameter:

bounds(Array<number> | Bounds) Latitude and longitude range

immediately(boolean) Zoom to the specified position immediately, optional, default value: false

avoid(Array<number>=[0,0,0,0]) The padding from the border, in the order: top, bottom, left, right

Demo:

var southWest = new AMap.LngLat(100.456575, 13.74256); //Latitude and longitude coordinates of the southwest corner
var northEast = new AMap.LngLat(100.518716, 13.762569); //Latitude and longitude coordinates of the northeast corner
var bounds = new AMap.Bounds(southWest, northEast); //Create a latitude and longitude bounding box for a feature object
map.setBounds(bounds);
// map.setBounds(bounds, false, [20, 20, 0, 0]); //Another way of writing

panTo(lnglat, duration?)

The center point of the map moves to the specified point location

Parameter:

lnglat([number, number] | LngLat) The target location to move to

duration(Number?) The duration control of the animation transition, in ms, the default value is a dynamically calculated internal value. If the animateEnable property is configured as true, this parameter is invalid

Demo:

map.panTo(new AMap.LngLat(116.356449, 39.859008));
// map.panTo(new AMap.LngLat(116.356449, 39.859008), 2000); //Another way of writing

setLayers(layers)

Replacing the original layers on the map with multiple layers at once will remove the original layers on the map

Parameter:layers(Array<Layer>) Map Layers Array

Demo:

map.setLayers([layers]); //layers are the constructed layer objects

getLayers()

Get the map layers array, the array is one or more layers

return value: (Array<Layer>) Map Layers Array

Demo:

map.getLayers();

panBy(x, y, duration?)

Move the map in the x and y directions in pixels, x to the right is positive, y downward is positive

Parameter:

x(Number) Horizontal axis direction

y(Number) Vertical axis direction

duration(Number?) If animation transitions are used, the duration control of the animation transition, in ms, defaults to a dynamically calculated internal value

Demo:

map.panBy(20, 10);
// map.panBy(20, 10, 2000); //Another way of writing

getStatus()

Get the current map state information, including whether the map can be dragged with the mouse, whether the map can be zoomed, whether the map can be rotated (rotateEnable), whether the map can be zoomed in by double-clicking, whether the map can be rotated by keyboard (keyboardEnable), etc

return value: (Object) Map state information mapping collection

Demo:

map.getStatus();

setStatus(status)

Set the current map display state, including whether the map can be dragged with the mouse, whether the map can be zoomed, whether the map can be rotated (rotateEnable), whether the map can be zoomed in by double-clicking, whether the map can be rotated by keyboard (keyboardEnable), etc

Parameter:status(Object) Map state value mapping collection

Demo:

var mapOpts = {
  showIndoorMap: false, // Whether to automatically display indoor maps when there is a vector base map, default is true for PC, false for mobile
  resizeEnable: true, //Whether to monitor the size change of the map container, default is false
  dragEnable: false, // Whether the map can be panned by dragging the mouse, default is true
  keyboardEnable: false, //Whether the map can be controlled via the keyboard, default is true
  doubleClickZoom: false, // Whether the map can be zoomed in by double-clicking the mouse, default is true
  zoomEnable: false, //Whether the map is zoomable, default is true
  rotateEnable: false, // Whether the map is rotatable, the 3D view defaults to true, and the 2D view defaults to false
};
map.setStatus(mapOpts);

add(features)

Add overlay/layer. The parameter is a single overlay/layer or an array of overlays/layers

Parameter:features(VectorOverlay | Array<any>) Overlay object or array

Demo:

map.add(marker); //The parameter is an overlay object
map.add([marker1, marker2]); //The parameter is an array of overlay objects

getDefaultCursor()

Get the default mouse pointer style of the map

return value: (String) Map mouse cursor style

Demo:

map.getDefaultCursor();

setDefaultCursor(cursor)

Set the default mouse cursor style for the map

Parameter: 

Set the default mouse cursor style. The cursor parameter should comply with the CSS cursor property specification. It can be a cursor style specified in CSS, such as setCursor("pointer"), or a custom cursor style, such as setCursor("url(' https://lbs.amap.com/webapi/static/Images//0.png' ),pointer")

Demo:

map.setDefaultCursor("pointer");

remove(features)

Remove overlay/layer. The parameter can be a single overlay/layer or an array of overlays/layers

Parameter:features(Overlay | Layer | Array<(Overlay | Layer)>) Overlay object or array

Demo:

map.remove(marker); //Parameter is an overlay object
map.remove([marker1, marker2]); //Parameter is an array of overlay objects

destroy()

Log out the map object and clear the map container

Demo:

map.destroy();

lngLatToCoords(lnglat)

Convert latitude and longitude to Mercator coordinates (unit: meters)

Parameter:lnglat([Number, Number] | LngLat) Latitude and longitude

return value: (any) Mercator coordinates (unit: meters)

Demo:

map.lngLatToCoords(new AMap.LngLat(116.438064, 40.024995));

coordsToLngLat(coords)

Convert Mercator coordinates (unit: meters) to latitude and longitude

Parameter:coords([Number, Number]) Mercator coordinates (unit: meters)

return value: (any) Latitude and longitude

Demo:

map.coordsToLngLat([12961825.993434597, 4869575.149852418]);

getLimitBounds()

Get restricted areas of the Map

return value: (any) Latitude and longitude range

Demo:

map.getLimitBounds();

setLimitBounds(bounds)

Set the restricted area of the Map, after setting the area restriction, pass in the parameter as the restricted Bounds. The map can only be dragged within the area

Parameter:bounds(Bounds) Bounds range

Demo:

var southWest = new AMap.LngLat(100.456575, 13.74256); //Latitude and longitude coordinates of the southwest corner
var northEast = new AMap.LngLat(100.518716, 13.762569); //Latitude and longitude coordinates of the northeast corner
var bounds = new AMap.Bounds(southWest, northEast); //Create a latitude and longitude bounding box for a feature object
map.setLimitBounds(bounds);

clearLimitBounds()

Clear the restricted area of the Map

Demo:

map.clearLimitBounds();

lngLatToContainer(lnglat)

Convert map latitude and longitude coordinates to map container pixel coordinates

Parameter:lnglat(Array<number> | LngLat) Latitude and longitude

return value: (Pixel) Container pixel coordinates

Demo:

map.lngLatToContainer(new AMap.LngLat(116.356449, 39.859008));

getAltitude(lnglat)

Get the current altitude and return: altitude spatial height (Note: This method is applicable to JSAPI v2.1Beta and above)

Parameter:lnglat(Array<number> | LngLat) lnglat latitude and longitude

return value: (Number) Altitude

getZooms()

Get the map zoom level range, default is [ 2 , 20 ]

return value: ([Number, Number]) The display level range of this layer

Demo:

map.getZooms();

setZooms(zooms)

Set the map zoom level range

Parameter:zooms([Number, Number]) Displayable level range of this layer

Demo:

map.setZooms([10, 18]);

containerToLngLat(pixel)

Convert map container coordinates to latitude and longitude

Parameter:pixel(Array<Number>| Pixe) Container pixel coordinates

return value: (LngLat) Successfully converted latitude and longitude

Demo:

map.containerToLngLat(new AMap.Pixel(600, 300));

coordToContainer(coord)

Mercator (in meters) to map container coordinates

Parameter:coord(Array<Number>) Mercator coordinates (in meters)

return value: (Array<Number>) Container pixel coordinates

Demo:

map.coordToContainer([12961825.993434597, 4869575.149852418]);

containerToCoord(pixel)

Convert map container coordinates to Mercator coordinates (in meters). The sky range returns null in 3D view, and returns height when elevation is enabled.

Parameter:pixel(Array<Number> | Pixel) Container pixel coordinates

return value: (Array<Number>) Mercator coordinates (in meters)

Demo:

map.containerToCoord(new AMap.Pixel(600, 300));

getAltitudeByContainer(pixel)

Obtain the elevation value of the corresponding geographical location through map screen pixels (Note: This method is applicable to JSAPI v2.1Beta and above)

Parameter:pixel(Array<Number> | Pixel) Container pixel coordinates

return value:(Number) Elevation value of the geographical location

Demo:

map.getAltitudeByContainer(new AMap.Pixel(600, 300));

pixelToLngLat(pixel, zoom?)

Convert flat map pixel coordinates to map latitude and longitude coordinates

Parameter:

pixel(Array<Number> | Pixel) Pixel coordinates

zoom(Number?) A certain map level

return value: (LngLat) Longitude and latitude coordinates

Demo:

map.pixelToLngLat(new AMap.Pixel(20,30), 12); // The second parameter specifies the zoom level, and can be optional

lngLatToPixel(lnglat, zoom?)

Convert longitude and latitude coordinates to flat map pixel coordinates

Parameter:

lnglat(Array<Number> | LngLat) Longitude and latitude

zoom(Number?) A certain map level, which defaults to the current map level

return value: (Pixel) Converted planar pixel coordinates

Demo:

map.lnglatToPixel([116.4, 39.9], 3); // The second parameter specifies the zoom level, which can be omitted

getResolution(point?)

Get the resolution of the map center point location, unit: meters/pixel

return value: (Number) Resolution

Demo:

map.getResolution();

getScale(dpi)

Get the current map scale. Indicates how many meters in real distance one meter on the screen represents.

Parameter:dpi(Number) The value of the screen DPI

return value: (Number) The value of the scale

getCity(getCityCallBack, lnglat)

Get the area where the map center is located, the callback function returns object attributes corresponding to {province, city, district/county}

Parameter:

getCityCallBack(Function) Callback function on successful query

lnglat(Array<Number>) The latitude and longitude to query, it can be omitted, defaults to the latitude and longitude of the map center point

Demo:

map.getCity(function(info)){
console.log(info);
}

setCity(cityName)

Use adcode to set the center point of the map display. Please refer to the city code table for the adcode. It is recommended not to use center/setCenter() and setCity() at the same time. If used together, the program will use setCity() as the final result.

Parameter:cityName(String) adcode

Demo:

map.setCity("840380000");

setFitView(overlays, immediately?, avoid?, maxZoom?)

Automatically zoom the map to an appropriate view level based on the distribution of overlays added to the map. All parameters can be omitted.

Parameter:

overlays(Array<Overlay>) The overlay array, which defaults to all overlay layers currently added to the map.

immediately(Boolean) Whether to immediately jump to the target position is set to true, indicating that it will jump immediately. When it is false, it uses animation to smoothly transition to the target position over a period of time. It can be omitted and defaults to false. If the animateEnable property is set to true, this parameter is invalid.

avoid(Array<Number> = [60,60,60,60]) Padding Around, Top, Bottom, Left, Right

maxZoom(Number = zooms[1]) Maximum Zoom Level

return value: (Bounds) Bounds New Map Viewport Range

Demo:

var map = new AMap.Map("container",{
    zoom: 10,
});

var marker = new AMap.Marker({
    map: map,
    position: [112, 30],
    icon: "https://webapi.amap.com/images/car.png",
    offset: new AMap.Pixel(-26, -13),
});
var marker1 = new AMap.Marker({
    map: map,
    position: [110, 31],
    icon: "https://webapi.amap.com/images/car.png",
    offset: new AMap.Pixel(-26, -13),
});
map.setFitView( [marker, marker1]); 
// Alternative Notation
/* map.setFitView(
    [marker, marker1],  // Overlay Array
    false,  // Animate transition to the specified position
    [60, 60, 60, 60],  // Surrounding margins, top, bottom, left, right
    10,  // Maximum zoom level
); */

getFitZoomAndCenterByOverlays(overlays, avoid?, maxZoom?)

Calculate the appropriate center point and zoom level based on overlays

Parameter:

overlays(Array<Overlay>) Overlay

avoid(Array<Number>) Margins on all sides, top, bottom, left, right, default: [0,0,0,0]

maxZoom(Number = CoreMap.defaultZooms[1]) Maximum zoom level

return value: ([Number, LngLat]) Zoom level and center point latitude and longitude

Demo:

map.getFitZoomAndCenterByOverlays([marker, marker1]);

getFitZoomAndCenterByBounds(bounds, avoid?, maxZoom?)

Calculate the appropriate center point and zoom level based on bounds

Parameter:

bounds(Array<number> | Bounds) Area to be calculated

avoid(Array<Number>) Margins on all sides, top, bottom, left, right, default value: [0,0,0,0]

maxZoom(Number) Maximum zoom level, default value: 20

return value: ([Number, LngLat]) Zoom level and center point latitude and longitude

Demo:

var southWest = new AMap.LngLat(100.456575, 13.74256); //Latitude and longitude coordinates of the southwest corner
var northEast = new AMap.LngLat(100.518716, 13.762569); //Latitude and longitude coordinates of the northeast corner
var bounds = new AMap.Bounds(southWest, northEast); //Create a latitude and longitude bounding box for a feature object
map.getFitZoomAndCenterByBounds(bounds);

addControl(control)

Add control. The parameter can be any plugin object in the plugin list, such as: ToolBar, OverView, Scale, etc

Parameter:control(Control) Control object

Demo:

//Asynchronously load toolbar plugin
AMap.plugin("AMap.ToolBar", function () {
  var toolbar = new AMap.ToolBar(); //Create toolbar plugin instance
  map.addControl(toolbar); //Add toolbar plugin to page
});

removeControl(control)

Remove the specified control on the map

Parameter:control(Control) Control object

Demo:

map.removeControl(toolbar);

setMapStyle(value)

Set the display style of the map, currently two map styles are supported:

The first type: customize the map style, such as "amap://styles/d6bf8c1d69cea9f5c696185ad4ac4c86"

You can go to the map customization platform to customize your own map style;

For other template styles and custom map usage instructions, see the Development Guide

Parameter:value(String) The display style of the map

Demo:

map.setMapStyle("amap://styles/whitesmoke");

getMapStyle()

Get the display style of the map

return value: (String) The display style of the map

Demo:

map.getMapStyle();

getAllOverlays(type?)

Returns the added overlay objects, optional types include marker, circle, polyline, polygon; Type can be omitted, when omitted, all overlays (marker, circle, polyline, polygon) are returned.

The returned result does not include official overlays, such as location markers, nearby search circles, etc

Parameter:type(String?) Optional, overlay type

return value: (Array<Overlay>) Array of overlays

Demo:

map.getAllOverlays();

clearMap()

Remove all overlays on the map

Demo:

map.clearMap();

clearInfoWindow()

Clear the information window on the map

Demo:

map.clearInfoWindow();

getFeatures()

Get the types of map display elements

return value: (Array<String>) Return a collection of features, which may include bg (map background), point (points of interest), road (roads), building (buildings)

Demo:

map.getFeatures()

setFeatures(features)

Set the types of elements displayed on the map, supporting bg (map background), point (points of interest), road (roads), building (buildings)

Parameter: features(Array<String>) Type array

Demo:

map.setFeatures(['bg', 'road']);

getMapApprovalNumber()

Get approval number

return value: （String）Review map number

Demo:

map.getMapApprovalNumber();

setMask(maskPath)

Set the mask range

Parameter:maskPath(Array<Array<number>>) Mask range

Demo:

const map = new AMap.Map("container", {
  viewMode: "3D", 
  zoom: 9, 
  showOversea: true, //Enable world Map
  center: [77.193045, 28.59086],
});
map.setMask([
  [
    [114.914616, 41.019218],
    [114.961654, 38.24858],
    [122.346663, 37.094428],
    [122.69945, 40.716863],
  ],
]);

setLabelRejectMask(reject)

Set whether the text rejects the mask, true: no masking, false: masking

Parameter:reject(Boolean) Whether to reject the mask

Demo:

map.setLabelRejectMask(true);