ElasticMarker

AMap.ElasticMarker

Flexible point marker, a type of point marker that can change its icon and size with the map level. Construct a flexible point marker object, and set the properties of the flexible point marker object through ElasticMarkerOptions

new AMap.ElasticMarker(opts: ElasticMarkerOptions);

Tutorial

Parameter

opts(ElasticMarkerOptions): Flexible point marker parameters

Attribute			Type	Description
map			Map	The map object on which to display this marker
position			Vector2 \| LngLat	The position where the point marker is displayed on the map, supports passing a longitude and latitude object or a one-dimensional array composed of longitude and latitude, e.g., AMap.LngLat(77.19,28.59) or [77.19,28.59]
visible			boolean	Whether the point marker is visible, default value: true
zIndex			number	The stacking order of point markers, when multiple point markers overlap on the map, a higher zIndex value will cause the marker to be displayed on the upper layer
title			string	The text prompt displayed when the mouse hovers over the marker. If not set, no text prompt will be displayed
offset			Vector2 \| Pixel	The offset of the point marker's display position, default value: [0,0]. After specifying the position of the point marker, the default reference point is the top-left corner of the marker (if an anchor is set, the anchor is used). To precisely align a specific position of the point marker to the given position, you need to set an appropriate offset based on the size of the marker. If you have questions about this attribute, it is recommended to refer to related tutorials
clickable			boolean	Control whether the point marker can be clicked. When set to true, the user can click the marker and trigger related events (such as click events). If set to false, the marker cannot be clicked. Default value: true
draggable			boolean	Set whether the point marker is draggable, default value: false
bubble			boolean	Whether the event bubbles, default value: false
cursor			string	Specify the style when hovering over a point marker. The custom style should comply with the CSS cursor property specification. IE only supports cur/ani/ico formats, Opera does not support custom cursors
topWhenClick			boolean	Whether to bring the marker to the top for highlighting when the mouse clicks on it. Default value: false, not on top. If set to true, the marker will be placed above other markers when clicked to make it more visible to the user
zoomStyleMapping			Record<string, number>	Represents the mapping relationship between map levels and styles array, e.g., {14:0,15:0,16:1,17:1,} means that levels 14 to 15 use the first style in the styles array (index 0), and levels 16 to 17 use the second style in the styles array (index 1)
extData			any	User-defined attributes support any data type in the JavaScript API, such as the id of a Marker. Custom data can be stored in this attribute for convenient subsequent operations
styles			Array<ElasticStyle>	An array of multiple different styles
	icon		ElasticIcon	Flexible annotation icon style type
		img	string	The image address of the icon (accessible icon URL string)
		size	Vector	The original size of the icon (the basic size of the icon without scaling transformation)
		anchor	Vector \| string	Set the anchor point position of the icon, optional values: 'top-left','top-center','top-right', 'middle-left', 'center', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right'
		imageOffset	Vector \| string	Image offset, applicable when using sprite maps, indicating the top-left position of the icon in the entire image
		imageSize	number	Optional, with the default icon size set by the size attribute. When using sprite maps, the imageSize property is required as it specifies the size of the entire sprite image
		fitZoom	number	The most appropriate level, at which the map displays at its original size
		scaleFactor	number	Zoom factor for one level of map enlargement
		maxScale	number	Maximum zoom level
		minScale	number	Minimum zoom level
	label		ElasticLabel	Flexible text annotation style type
		content	ElasticLabel	Text content
		position	ElasticLabel	Text position relative to the icon's reference point, options: BL, BM, BR, ML, MR, TL, TM, TR representing bottom left, bottom center, bottom right, middle left, middle right, top left, top center, top right
		offset	ElasticLabel	Offset relative to position
		minZoom	ElasticLabel	Minimum display level of label

Demo

var map = new AMap.Map("container", {
  zoom: 10, //Map level
  center: [116.397428, 39.90923], 
});
var stylesArray = [
  {
    icon: {
      //Icon style
      img: "https://a.amap.com/jsapi_demos/static/resource/img/men3.png",
      size: [16, 16], //Original size of the icon
      anchor: "bottom-center", //Anchor position
      fitZoom: 14, //The most suitable level where the icon is displayed at its original size
      scaleFactor: 2, //The zoom scale factor for one level of map zoom-in
      maxScale: 2, //The maximum zoom-in scale of the image, the icon will zoom in as the map zooms in, with a maximum of 2
      minScale: 1, //The minimum zoom-out scale of the image, the icon will zoom out as the map zooms out, with a minimum of 1
    },
    label: {
      //Text Annotation
      content: "百花殿", //Text content
      position: "BM", //The reference point of the text position relative to the icon,"BM" stands for bottom center
      minZoom: 15, //The minimum display level for the label, meaning the text annotation will only appear on the map at level 15 and above
    },
  },
  {
    icon: {
      img: "https://a.amap.com/jsapi_demos/static/resource/img/tingzi.png",
      size: [48, 63],
      anchor: "bottom-center",
      fitZoom: 17.5,
      scaleFactor: 2,
      maxScale: 2,
      minScale: 0.125,
    },
    label: {
      content: "万寿亭",
      position: "BM",
      minZoom: 15,
    },
  },
];
var zoomStyleMapping = {
  14: 0, //Use style 0 for levels 14-17
  15: 0,
  16: 0,
  17: 0,
  18: 1, //Use style 1 for levels 18-20
  19: 1,
  20: 1,
};
AMap.plugin(["AMap.ElasticMarker"], function () {
  var elasticMarker = new AMap.ElasticMarker({
    position: [116.405562, 39.881166], //Point marker location
    styles: stylesArray, //Specify the style list
    zoomStyleMapping: zoomStyleMapping, //Specify the mapping of zoom and styles
  });
  map.add(elasticMarker); //Add to the map
  map.setFitView(); //Zoom the map to an appropriate view level
});

Method

getTitle()

Get the text prompt for the flexible point marker

return value: (string) Text tooltip set by the title attribute, returns an empty string if not set

Demo:

elasticMarker.getTitle();

setTitle(title)

Set the text tooltip when the mouse hovers over the flexible point marker

Parameter: title(string) Text tooltip of the flexible point marker

Demo:

elasticMarker.setTitle("Text tooltip");

getClickable()

Get whether the flexible point marker supports mouse click events

return value: (boolean) Boolean value

Demo:

elasticMarker.getClickable();

getMap()

Get the map instance of the overlay

return value: (Map | null) If the overlay has been added to the map, return the map instance where the overlay is located. If the overlay has not been added, has been removed, or does not exist on any map, return null

Demo:

elasticMarker.getMap();

setMap(map)

Set the overlay to the map

Parameter: map(Map | null) It can be a Map object or null. If it is a Map object, the overlay will be added to this map. If it is null or omitted, the overlay will be removed from the current map

Demo:

elasticMarker.setMap(map);

show()

Show the overlay

Demo:

elasticMarker.show();

hide()

Hide the overlay

Demo:

elasticMarker.hide();

getPosition()

Get the position of the flexible point

return value: (object) Location information of the overlay

Demo:

elasticMarker.getPosition();

setPosition(position)

Set the position of the flexible point

Parameter: position(Vector2 | LngLat) Supports passing in a latitude-longitude object or a one-dimensional array composed of latitude and longitude

Demo:

elasticMarker.setPosition([116.397428, 39.90923]);

setAnchor(anchor)

Parameter: anchor(string) Specify the anchor position of the overlay

Demo:

elasticMarker.setAnchor('center');

getzIndex()

Get the stacking order of overlays

return value: (number | undefined) Overlay stacking order

Demo:

elasticMarker.getzIndex()

setzIndex(zIndex)

Set the overlay order

Parameter: zIndex(number) Set overlay order

Demo:

elasticMarker.setzIndex(99);

getOptions()

Get all properties of the overlay

return value: (OverlayOptions) Object containing all configuration properties of the overlay

Demo:

elasticMarker.getOptions()

getBounds()

Get flexible point marker range

return value: (Bounds) Flexible point marker position range

Demo:

elasticMarker.getBounds()

setClickable(clickable)

Set whether the flexible point marker supports mouse click events

Parameter: clickable(boolean) The clickable parameter is optional (default is true), when set to false, the flexible point marker does not support mouse click events

Demo:

elasticMarker.setClickable(true);

getDraggable()

Get whether the flexible point marker object is draggable

return value: (boolean) Boolean value

Demo:

elasticMarker.getDraggable();

setDraggable(draggable)

Set whether the flexible point marker object is draggable

Parameter: draggable(boolean) The draggable parameter is optional (default is false). When set to true, the flexible marker object can be dragged

Demo:

elasticMarker.setDraggable(true);

getTop()

Get whether the flexible marker is brought to the top

return value: (boolean) Boolean value

Demo:

elasticMarker.getTop();

setTop(isTop)

When there are multiple markers on the map, set whether to bring the flexible marker to the top

Parameter: isTop(boolean) The isTop parameter is optional (default is false). When set to true, it will bring the flexible marker to the top when there are multiple flexible markers on the map

Demo:

elasticMarker.setTop(true);

getCursor()

Get the cursor settings when the mouse hovers

return value: (string) The currently set cursor type

Demo:

elasticMarker.getCursor();

setCursor(cursor)

Set the cursor when the mouse hovers

Parameter:

cursor(string) A string specifying the cursor style, the custom style should comply with the CSS cursor property specification. IE only supports cur/ani/ico formats, Opera does not support custom cursors

Demo:

elasticMarker.setCursor("crosshair");

getExtData()

Get user-defined data

return value: (any | undefined) The value set by the extData property, returns an empty object if not set

Demo:

elasticMarker.getExtData();

setExtData(extData)

Set User-defined Data

Parameter: extData(any) User-defined data, supporting any data type in JavaScript API

Demo:

elasticMarker.setExtData({id:1});

remove()

Remove Point Marker

Demo:

elasticMarker.remove();

Event

Event Name	Description
click	Left Mouse Click Event
dblclick	Left Mouse Double Click Event
rightclick	Right Mouse Click Event
mousemove	Mouse Movement
mouseover	Event triggered when the mouse moves close to a point marker
mouseout	Event triggered when the mouse moves out of a point marker
mousedown	Event triggered when the mouse is pressed on a point marker
mouseup	Event triggered when the mouse is pressed and then released on a point marker
dragstart	Event triggered when starting to drag a point marker
dragging	Event triggered when the mouse drags and moves a point marker
dragend	Event triggered when dragging and moving a point marker ends
touchstart	Event triggered when touch starts, only applicable to mobile devices
touchmove	Event triggered during touch movement, only applicable to mobile devices
touchend	Event triggered when touch ends, only applicable to mobile devices

For event object property descriptions, go to:MapsEvent