Text

getText()

Get the text mark content

return value: (string | undefined) Text content set by the text attribute

Demo:

text.getText();

setText()

Set the text mark content

Parameter: text (string | number) Content of the text mark

Demo:

text.setText("Text Label");

setStyle()

Modify the text mark style. Object is the same as CSS style sheet, such as:{'background-color':'red'}

Parameter: style (object) Text marker style

Demo:

text.setStyle({'background-color':'red'});

getTitle()

Get the text prompt of the text marker

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

Demo:

text.getTitle();

setTitle(title)

Set the text prompt when the mouse hovers over the text marker

Parameter: title (string) Text marker's text prompt

Demo:

text.setTitle("Text prompt");

getClickable()

Get whether the text marker supports mouse click events

return value: (boolean) Boolean value

Demo:

text.getClickable();

setClickable(clickable)

Set whether the text marker supports mouse click events

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

Demo:

text.setClickable(true);

getDraggable()

Check if the text marker object is draggable

return value: (boolean) Boolean value

Demo:

text.getDraggable();

getMap()

Get the map instance of the text marker

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:

text.getMap();

setMap(map)

Set the text marker on the map

Parameter: map(Map | null) 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:

text.setMap(map);

addTo(map)

Add a text marker to the map, which is not recommended. It is recommended to use map.add(text)

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

Demo:

text.addTo(map);

add(map)

Add a text marker to the map

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

Demo:

text.add(map);

show()

Show text marker

Demo:

text.show();

hide()

Hide text marker

Demo:

text.hide();

getPosition()

Get text marker position

return value: (object) Overlay location information

Demo:

text.getPosition();

setPosition(position)

Set text marker position

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

Demo:

text.setPosition([116.397428, 39.90923]);

getAnchor()

Get the anchor point position of the text marker on the map

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

Demo:

text.getAnchor();

setAnchor(anchor)

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

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

Demo:

text.setAnchor('center');

getOffset()

Get text marker offset

return value: (Vector2 | Pixel | undefined | Array<number>) Offset of the overlay

Demo:

text.getOffset();

setOffset(offset)

Set text marker offset, relative to the position after the anchor

Parameter:

offset(Vector2 | Pixel) Value of the text marker offset, note: the offset is by default based on the top-left corner of the text marker (if an anchor is set, it is based on the anchor). To precisely align a specific position of the text marker to the given position, an appropriate offset needs to be set based on the size of the text marker. If you have questions about this property, it is recommended to consult the relevant tutorial

Demo:

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

getAngle()

Get text marker rotation angle

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

Demo:

text.getAngle();

setAngle(angle)

Set the rotation angle of text markers

Parameter: angle(number) Set rotation angle

Demo:

text.setAngle(5);

getzIndex()

Get the overlay order of text markers

return value: (number | undefined) Overlay order of text markers

Demo:

text.getzIndex()

setzIndex(zIndex)

Set the overlay order of a text label

Parameter: zIndex(number) The set overlay order

Demo:

text.setzIndex(99);

getOptions()

Get all attributes of a text label

return value: (OverlayOptions) An object containing all configuration properties of a text label

Demo:

text.getOptions();

getBounds()

Get the range of a text label

return value: (Bounds) Text marking position range

Demo:

text.getBounds();

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

Demo:

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 Text instance
  const animationMarker = new AMap.Text({
    position: new AMap.LngLat(77.01486, 28.602616),
    anchor: "bottom-center",
    text: "文本标记",
    style: { "background-color": "red" },
  });
  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()

Enable the text marker animation, available after loading AMap.MoveAnimation

Demo:

animationMarker.startMove();

stopMove()

Stop the text marker animation, available after loading AMap.MoveAnimation

Demo:

animationMarker.stopMove();

pauseMove()

Pause the text marker animation, available after loading AMap.MoveAnimation

Demo:

animationMarker.pauseMove();

resumeMove()

Restart the text marker animation, available after loading AMap.MoveAnimation

Demo:

animationMarker.resumeMove();

setDraggable(draggable)

Set whether the text marker object can be dragged and moved

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

Demo:

text.setDraggable(true);

getTop()

Get whether this text label is placed on top

return value: (boolean) Boolean value

Demo:

text.getTop();

setTop(isTop)

When there are multiple markers on the map, set whether to place this text label on top

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

Demo:

text.setTop(true);

getCursor()

Get the cursor settings when the mouse is hovering

return value: (string) The currently set cursor type

Demo:

text.getCursor();

setCursor(cursor)

Set the cursor when the mouse hovers

Parameter:

cursor(string) Specify a string for 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:

text.setCursor("crosshair");

getExtData()

Retrieve user-defined data

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

Demo:

text.getExtData();

setExtData(extData)

Set user-defined data

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

Demo:

text.setExtData({id:1});

remove()

Remove text marker 

Demo:

text.remove();