Marker

getTitle()

Get the text hint of the point marker

return value: (string | undefined) The text hint set by the title attribute, if not set, returns an empty string

Demo:

marker.getTitle();

setTitle(title)

Set the text hint when hovering over the point marker

Parameter: title(string) Text hint for text marker

Demo:

marker.setTitle("Text hint");

getHeight()

Get the height of Marker above the ground (This method applies to JS API v2.1Beta and above)

return value: (number | undefined) The value of marker's altitude above the ground

Demo:

marker.getTitle();

getIcon()

Get Icon content

return value: (Icon | string | undefined) The value set for the icon property can be a String type icon address or an Icon object, if the icon property is not set, it returns undefined

Demo:

marker.getIcon();

setIcon(icon)

Set the display icon of the point marker, if a valid content is set, the icon will not take effect

Parameter: icon(Icon | string) The icon displayed in the point marker can be a String type icon address or an Icon object

Demo:

marker.setIcon("//vdata.amap.com/icons/b18/1/2.png");

getLabel()

Get the content of the point marker text label

return value: (LabelOptions) Settings for the label (text label), if the label property is not set, an empty object is returned

Demo:

marker.getLabel();

setLabel(opts)

Set the content of the point marker text label

Parameter: opts(LabelOptions) Settings for the label (text label)

Demo:

marker.setLabel({content:'点标记',direction:'bottom',offset:[0,5]});

getClickable()

Check if the point marker supports mouse click events

return value: (boolean) Boolean value

Demo:

marker.getClickable();

setClickable(clickable)

Set whether the point marker supports mouse click events

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

Demo:

marker.setClickable(true);

getDraggable()

Get whether the point marker object is draggable

return value: (boolean) Boolean value

Demo:

marker.getDraggable();

setDraggable(draggable)

Set whether the point marker object is draggable

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

Demo:

marker.setDraggable(true);

getTop()

Get whether the point marker is brought to the top

return value: (boolean) Boolean value

Demo:

marker.getTop();

setTop(isTop)

Set whether to bring the point marker to the top when there are multiple markers on the map

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

marker.setTop(true);

getCursor()

Get the cursor settings when the mouse hovers

return value: (string) The currently set cursor type

Demo:

marker.getCursor();

setCursor(cursor)

Set the cursor when the mouse hovers

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

Demo:

marker.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:

marker.getExtData();

setExtData(extData)

Set user-defined data

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

Demo:

marker.setExtData({id:1});

remove()

Remove the marker

Demo:

marker.remove();

moveTo(targetPosition, opts)

Move the marker to the specified location with a given duration/speed, the AMap.MoveAnimation plugin needs to be loaded to use this feature

Parameter: 

targetPosition(LngLat | Vector2) The specified location supports passing in a longitude and latitude object or a one-dimensional array composed of longitude and latitude, such as: AMap.LngLat(77.19, 28.59) or [77.19, 28.59]

opts(MoveToOptions) moveTo animation parameters

Demo:

AMap.plugin("AMap.MoveAnimation", function () {
  // After loading the AMap.MoveAnimation plugin, create a Marker instance
  const animationMarker = new AMap.Marker({ 
    position: new AMap.LngLat(77.01486, 28.602616),
    icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
    offset: new AMap.Pixel(-13, -26),
  });
  map.add(animationMarker);
  // Call the moveTo method
  animationMarker.moveTo([77.299132, 28.573676], {
    duration: 2000, // Animation duration
  });
});

moveAlong(path, opts)

The point marker moves along the specified path for a specified duration. After loading AMap.MoveAnimation, JS API 2.0 can support segmented speed and duration settings.

Parameter:

path(Array<LngLat> | Array<Vector2>| Array<Object>) Path array, if in doubt, please refer to the sample code below

opts(Object) moveAlong animation parameters optional

Demo:

// Define the path
const path = [
  new AMap.LngLat(76.993574, 28.664089),
  new AMap.LngLat(76.992888, 28.621906),
  new AMap.LngLat(77.024474, 28.606836),
  new AMap.LngLat(77.092451, 28.606836),
  new AMap.LngLat(77.155623, 28.598999),
];
// Set the animation duration for each path segment
const customData = [
  { position: path[0], duration: 200 },
  { position: path[1], duration: 400 },
  { position: path[2], duration: 600 },
  { position: path[3], duration: 800 },
  { position: path[4], duration: 1000 },
];
AMap.plugin("AMap.MoveAnimation", function () {
  // After loading the AMap.MoveAnimation plugin, create a Marker instance
  const animationMarker = new AMap.Text({
    position: new AMap.LngLat(77.176909, 28.619495),
    anchor: "bottom-center",
    text: "marker",
    style: { "background-color": "red" },
  });
  // Add the Marker instance to the map
  map.add(animationMarker);
  // Call the moveAlong method
  animationMarker.moveAlong(customData, {
    circlable: true, //The animation starts looping
    aniInterval: 2000, //The interval between each complete animation is 2s
  });
});

startMove()

Start the point marker animation, the point marker created after loading AMap.MoveAnimation can be used

Demo:

animationMarker.startMove();

stopMove()

Stop the point marker animation, the point marker created after loading AMap.MoveAnimation can be used

Demo:

animationMarker.stopMove();

pauseMove()

Pause the point marker animation, point markers created after loading AMap.MoveAnimation can be used

Demo:

animationMarker.pauseMove();

resumeMove()

Restart the point marker animation, point markers created after loading AMap.MoveAnimation can be used

Demo:

animationMarker.resumeMove();

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:

marker.getMap();

setMap(map)

Set the overlay onto 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 default, the overlay will be removed from the current map

Demo:

marker.setMap(map);

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:

marker.getMap();

addTo(map)

Set the overlay onto the map

Parameter: map(Map) Map object, the overlay will be added to this map

Demo:

marker.addTo(map);

add(map)

Add overlay to the map

Parameter: map(Map) Map object, the overlay will be added to this map

Demo:

marker.add(map);

show()

Show overlay

Demo:

marker.show();

hide()

Hide overlay

Demo:

marker.hide();

getPosition()

Get overlay position

return value: (object) Location information of the overlay

Demo:

marker.getPosition();

setPosition(position)

Set the position of the overlay

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

Demo:

marker.setPosition([116.397428, 39.90923]);

getAnchor()

Get the anchor position of the overlay on the map

return value: (string | Vector2 | undefined) Anchor position of the overlay

Demo:

marker.getAnchor();

setAnchor(anchor)

Set overlay anchor settings. Default value: 'top-left', optional values: 'top-left'|'top-center'|'top-right'|'middle-left'|'center'|'middle-right'|'bottom-left'|'bottom-center'|'bottom-right' 

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

Demo:

marker.setAnchor('center');

getOffset()

Get overlay offset

return value: (Vector2 | Pixel | undefined | Array<number>) Overlay offset

Demo:

marker.getOffset();

setOffset(offset)

Set overlay offset

Parameter: offset(Vector2 | Pixel) The value of the point marker offset, note: the offset defaults to the top-left corner of the marker (if an anchor is set, then the anchor is used). To accurately align a specific position of the marker to a given position, an appropriate offset needs to be set based on the dimensions of the marker. If you have any questions about this property, it is recommended to consult the relevant tutorial.

Demo:

marker.setOffset(new AMap.Pixel(-13, -30));

getAngle()

Get overlay rotation angle

return value: (number | undefined) Rotation angle of the overlay

Demo:

marker.getAngle();

setAngle(angle)

Set overlay rotation angle

Parameter: angle(number) Set rotation angle

Demo:

marker.setAngle(5);

getSize()

Get the size of the overlay

return value: (Vector2) An array containing width and height properties

Demo:

marker.getSize();

setSize(size)

Set the size of the overlay

Parameter: size(Vector2 | Size) Overlay size

Demo:

marker.setSize([30,30]);

getzIndex()

Get the overlay order of the overlay

return value: (number | undefined) Overlay order of the overlay

Demo:

marker.getzIndex()

setzIndex(zIndex)

Set the overlay order of the overlay

Parameter: zIndex(number) Set overlay order

Demo:

marker.setzIndex(99);

getOptions()

Get all properties of the overlay

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

Demo:

marker.getOptions()

getContent()

Get the custom content displayed by the point marker

return value: (string | HTMLElement | undefined) If the point marker has the content attribute set, an object containing the custom content will be returned; otherwise, an empty string will be returned

Demo:

marker.getContent()

setContent(content)

Set the custom content displayed by the point marker, which can be a user-defined DOM node or an HTML fragment of a DOM node

Parameter: content(HTMLDOM | string) User-defined DOM node or HTML fragment of a DOM node. If you have questions about this parameter, it is recommended to consult the related tutorial. When the content is valid, the icon attribute will be overwritten

Demo:

marker.setContent(`<div style="width:25px; height:34px;">
<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png" style="width:100%; height:100%;">
</div>`);

getBounds()

Get point marker range

return value: (Bounds) Point Marker Location Range

Demo:

marker.getBounds()