Text marker

This article introduces the text marker AMap.Text. The text marker displays plain text. It inherits from AMap.Marker and has most of the properties, methods, and events of AMap.Marker.

Text marker example

1、Add text marker

1.1 Create Map

const map = new AMap.Map("container", {
  viewMode: "2D",
  zoom: 11,
  showOversea: true, //Enable world Map
  center: [100.491422, 13.749313],
});

Go to display the map and complete the map creation

1.2 Add Text instance

var text = new AMap.Text({
  text: "Plain text marker", //Mark the displayed text content
  anchor: "center", //Set text marker anchor position
  draggable: true, 
  cursor: "pointer",
  angle: 10, 
  style: {
    //Set text style, Object same as CSS style sheet
    "padding": ".75rem 1.25rem",
    "margin-bottom": "1rem",
    "border-radius": ".25rem",
    "background-color": "white",
    "width": "15rem",
    "border-width": 0,
    "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
    "text-align": "center",
    "font-size": "20px",
    "color": "blue",
  },
  position: [100.748227, 13.697617],
});
text.setMap(map);

View all AMap.Text properties and methods

2、Description of properties and methods involved in this chapter

2.1 AMap.Text

parameters/methods	Description	Type	Description description
text	Mark the displayed text content	String
anchor	Text marker anchor position	String	Optional value: 'top-left' 'top-center' 'top-right' 'middle-left' 'center' 'middle-right' 'bottom-left' 'bottom-center' 'bottom-right'
draggable	Whether it is draggable	Boolean	true \| false
cursor	Specify the mouse style when hovering	String
angle	Rotation angle of point markers	Number	Example: angle: 10 will rotate the text label 10 degrees clockwise
style	Set text style	Object	Object is the same as css stylesheet
position	The position where the point marker is displayed on the map	Array
text.setMap(map)	Set text markers on the map	Function

View all AMap.Text properties and methods