AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/12 14:34
文本标注
简介

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

提供的文本标注

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("您点击了标注");
});

上一篇

地面叠加层

下一篇

信息窗口

本篇文章对您是否有帮助?