文本标记最后更新时间: 2024年01月08日

本文介绍文本标记AMap.Text，文本标记展示内容为纯文本。继承自AMap.Marker，具有AMap.Marker的大部分属性、方法和事件。

文本标记示例

试一试

下载完整代码

1、添加文本标记

1.1 准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

1.2 创建地图

var map = new AMap.Map("container", {
  viewMode: "3D", //初始地图的视图模式
  zoom: 13, //地图级别
  center: [116.4, 39.92], //地图中心点
});

前往展示地图，完成地图创建。

1.3 添加 Text 实例

提示

如果不知道如何确认经纬度前往拾取坐标

var text = new AMap.Text({
  text: "纯文本标记", //标记显示的文本内容
  anchor: "center", //设置文本标记锚点位置
  draggable: true, //是否可拖拽
  cursor: "pointer", //指定鼠标悬停时的鼠标样式。
  angle: 10, //点标记的旋转角度
  style: {
    //设置文本样式，Object 同 css 样式表
    "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: [116.396923, 39.918203], //点标记在地图上显示的位置
});
text.setMap(map); //将文本标记设置到地图上

查看所有AMap.Text属性和方法

2、本章涉及的属性及方法说明

2.1 AMap.Text

参数/方法	说明	类型	参数值描述
text	标记显示的文本内容	String
anchor	文本标记锚点位置	String	可选值： 'top-left' 'top-center' 'top-right' 'middle-left' 'center' 'middle-right' 'bottom-left' 'bottom-center' 'bottom-right'
draggable	是否可拖拽	Boolean	true \| false
cursor	指定鼠标悬停时的鼠标样式	String
angle	点标记的旋转角度	Number	例：angle: 10 将使文本标注顺时针旋转 10 度
style	设置文本样式	Object	Object同 css 样式表
position	点标记在地图上显示的位置	Array
text.setMap(map)	将文本标记设置到地图上	Function