LabelMarker

getName()

Get the name of the annotation as the annotation identifier, not the final text displayed on the map

return value: (string | undefined) If a label is set, return the label name; if not, return undefined

Demo:

labelMarker.getName();

setName(name)

Set the name of the annotation as an identifier, not the text content displayed on the map

Parameter: name (string) Name of the annotation point

Demo:

labelMarker.setName("Annotation");

getPosition()

Get the display position of the annotation

return value: (object) Location information of the annotation point

Demo:

labelMarker.getPosition();

setPosition(position)

Set the position of the annotation

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

Demo:

labelMarker.setPosition([116.397428, 39.90923]);

getZooms()

Get annotation display level range

return value: (Vector2 | undefined) Annotation point display level range

Demo:

labelMarker.getZooms();

setZooms(zooms)

Set display level range

Parameter: zooms ([number]) Displayable level range of the marker

Demo:

labelMarker.setZooms([10,12]);

getOpacity()

Get the value of the marker's transparency

return value: (number | undefined) Value of the marker's transparency

Demo:

labelMarker.getOpacity();

setOpacity(opacity)

Set the transparency of the marker, range [0 ~ 1], where 1 means completely opaque and 0 means completely transparent

Parameter: opacity (number) Transparency of the marker

Demo:

labelMarker.setOpacity(0.5);

getzIndex()

Get the stacking order of label points

return value: (number | undefined) Stacking order of label points

Demo:

labelMarker.getzIndex()

setzIndex(zIndex)

Set the stacking order of label points

Parameter: zIndex(number) Set the stacking order

Demo:

labelMarker.setzIndex(99);

getRank()

Get the priority of labels, which is used when the labelsLayer supports collision avoidance. Labels with higher rank values will avoid those with lower rank values

return value: (number) The priority of the label point

Demo:

labelMarker.getRank();

setRank(rank)

Set the label priority, which is used when the labelsLayer supports avoidance, and labels with a higher rank value will avoid labels with a lower rank value

Parameter: rank (number) Set the label point priority

Demo:

labelMarker.setRank(100);

getText()

Get the label text settings, including text content, anchor position, style, etc

return value: (LabelMarkerTextOptions) If the label text is set, the label text settings are returned; if not, null is returned

Demo:

labelMarker.getText();

setText(textOpts)

Set the text of the annotation, which can set the displayed text content and text style, etc

Parameter: textOpts (LabelMarkerTextOptions) The textOpts parameter configuration refers to the text attribute settings

Demo:

labelMarker.setText({
  content: "Annotation Points",
});

getIcon()

Get the icon settings of the annotation, including the URL, size, etc. of the icon

return value: (LabelMarkerIconOptions) If the annotation icon is set, return the icon settings of the annotation; if not, return null

Demo:

labelMarker.getIcon();

setIcon(iconOpts)

Set the icon of the annotation, which can set the displayed annotation image

Parameter: iconOpts (LabelMarkerIconOptions) iconOpts Parameter Configuration Reference for Icon Attribute Settings

Demo:

labelMarker.setIcon({
  image: "https://a.amap.com/jsapi_demos/static/images/poi-marker.png",
});

getOptions()

Retrieve All Attribute Configurations for Annotations

return value: (LabelMarkerOptions) All Attribute Configurations for Annotations

Demo:

labelMarker.getOptions();

getExtData()

Get User Custom Attributes

return value: (any | undefined) The value set for the extData property, null if not set

Demo:

labelMarker.getExtData();

setExtData(extData)

Set user-defined properties

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

Demo:

labelMarker.setExtData({id:1});

setTop(isTop)

Whether to set the top annotation

Parameter: isTop(boolean) When isTop is set to true, it indicates that the annotation will be displayed before all other annotations; when set to false, the annotation will be displayed in the normal order

Demo:

labelMarker.setTop(true);

getVisible()

Get the visibility of the annotation

return value: (boolean | undefined) Visibility of the annotation

Demo:

labelMarker.getVisible();

setVisible()

Set the visibility of the annotation

Parameter: (boolean) Visibility of the annotation

Demo:

labelMarker.setVisible(true);

getCollision()

Get whether the annotation is avoided

return value: (boolean | undefined) Whether it is avoided

Demo:

labelMarker.getCollision();

show()

Annotation Display

Demo:

labelMarker.show();

hide()

Annotation hidden

Demo:

labelMarker.hide();

remove()

Remove itself from the annotation layer

Demo:

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

const labelsLayer = new AMap.LabelsLayer({}); // Create LabelsLayer layer
map.add(labelsLayer); // Add the LabelsLayer layer to the map
//Create LabelMarker
AMap.plugin("AMap.MoveAnimation", function () {
  // After loading the AMap.MoveAnimation plugin, create a LabelMarker instance
  const animationLabel = new AMap.LabelMarker({
    content: "Annotation",
    position: new AMap.LngLat(77.01486, 28.602616),
    text: {
      content: "Animated Annotation",
    },
  });
  labelsLayer.add(animationLabel); // Add Annotation Points to LabelsLayer
  // Call moveTo Method
  animationLabel.moveTo([77.299132, 28.573676], {
    duration: 1000, // 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. 

Demo:

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:

const labelsLayer = new AMap.LabelsLayer({}); // Create LabelsLayer
map.add(labelsLayer); // Add the LabelsLayer to the map
// 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 LabelMarker instance
  const animationLabel = new AMap.LabelMarker({
    content: "Annotation",
    position: new AMap.LngLat(77.176909, 28.619495),
    text: {
      content: "Animated annotation",
    },
  });
  labelsLayer.add(animationLabel); // Add annotation points to the LabelsLayer
  animationLabel.moveAlong(customData); // Invoke the moveAlong method
});

startMove()

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

Demo:

animationLabel.startMove();

stopMove()

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

Demo:

animationLabel.stopMove();

pauseMove()

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

Demo:

animationLabel.pauseMove();

resumeMove()

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

Demo:

animationLabel.resumeMove();