AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
文本标注
简介

所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。
覆盖物主要分为:标注(点标注、折线、多边形、圆、文本标注)、信息窗口、图层。
本节重点介绍一下如何向地图添加文本标注,以及与地图相关的一些交互。

提供的文本标注

Label:一个用来往地图上添加文本标注的类,您可以自定义标注的文本内容。
Label使用详情请见类参考

添加文本标注

API提供了默认的标注样式,您也可以通过setStyle来指定自定义样式。

1. 创建地图参照展示地图
2. 向地图中添加文本标注

如下示例,向地图添加了一个文本标注,并使用默认的标注样式:

var point = new BMapGL.Point(116.404, 39.915);
var content = 'label';
var label = new BMapGL.Label(content, {
// 创建文本标注
position: point, // 设置标注的地理位置
offset: new BMapGL.Size(10, 20), // 设置标注的偏移量
});
map.addOverlay(label); // 将标注添加到地图中
3. 修改文本标注样式

通过setStyle类可实现自定义文本标注的样式,其参数为一个表示样式的JavaScript对象常量。

注意:如果css的属性名中包含连字符,需要将连字符去掉并将其后的字母进行大写处理,例如:背景色属性要写成:backgroundColor。

var point = new BMapGL.Point(116.404, 39.915);
var content = 'label';
var label = new BMapGL.Label(content, {
// 创建文本标注
position: point,
offset: new BMapGL.Size(10, 20),
});
map.addOverlay(label); // 将标注添加到地图中
label.setStyle({
// 设置label的样式
color: '#000',
fontSize: '30px',
border: '2px solid #1E90FF',
});
4. 监听标注事件

JSAPI支持监听覆盖物的事件。

label.addEventListener("click", function(){
alert("您点击了标注");
});

上一篇

地面叠加层

下一篇

信息窗口
本篇文章对您是否有帮助?