海量标注 LabelMarker 最后更新时间: 2023年03月27日
本章介绍在图面添加数量为万级以上的点标记的解决方案。
当需要在地图添加千级以上的点标记时，LabelMarker 是代替 Marker 的更好选择。不同于 MassMarks ，LabelMarker 不仅可以绘制图标，还可以为图标添加文字信息，且万级以上数据也具有较好性能，配置也更加灵活。
提示
LabelMarker 之间支持避让功能，JS API 2.0 版本还支持地图底图标注避让 LabelMarker，可以让您的 Marker 更加明显。
准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
海量标注 LabelMarker
创建一个标注对象，首先要设置标注的位置，同时还可以通过 icon 和 text 属性设置图标和文字（也可以缺省）。
1
创建地图
const map = new AMap.Map('container',{
zoom: 10, //设置地图显示的缩放级别
center: [116.397428, 39.90923], //设置地图中心点坐标
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
viewMode: '2D' //设置地图模式
});2
设置一个图标对象
const icon = {
type: 'image', // 图标类型，现阶段只支持 image 类型
image: 'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png', // 图片 url
size: [64, 30],// 图片尺寸
anchor: 'center', // 图片相对 position 的锚点，默认为 bottom-center
};3
设置文字对象
const text = {
content: '中邮速递易', // 要展示的文字内容
direction: 'right', // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
offset: [-20, -5], // 在 direction 基础上的偏移量
style: { // 文字样式
fontSize: 12 ,// 字体大小
fillColor: '#22886f', // 字体颜色
strokeColor: '#fff', // 描边颜色
strokeWidth: 2, // 描边宽度
}
}4
创建 LabelMarker 实例
const labelMarker = new AMap.LabelMarker({
name: '标注2', // 此属性非绘制文字内容，仅最为标识使用
position: [116.466994, 39.984904],
zIndex: 16,
icon: icon, // 将第一步创建的 icon 对象传给 icon 属性
text: text,// 将第二步创建的 text 对象传给 text 属性
});5
创建 LabelsLayer 图层
LabelsLayer 图层是承载 LabelMarker 的图层，所有创建的 LabelMarker 需要添加到 LabelsLayer 图层上才能最终展示在地图上。
const labelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: true, // 该层内标注是否避让
allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
});6
将 LabelMarker 添加到 LabelsLayer 上
将上面第五步已创建的 LabelMarker 对象添加到 第六步创建的 LabelsLayer 图层
// 添加一个 labelMarker
labelsLayer.add(labelsMarker);提示
- 批量添加 labelMarker
labelsLayer.add([labelsMarker1, labelsMarker2])- 移除 LabelMarker
labelsLayer.remove(labelsMarker)- 批量移除 labelMarker
labelsLayer.remove([labelsMarker1, labelsMarker2])7
将 LabelsLayer 添加到地图实例
map.add(labelsLayer);8
为 LabelMarker 添加事件
LabelMarker 与其它覆盖物添加事件的方式一致，使用 on() 的方式添加事件
labelMarker.on('click', function(e){
labelMarker.setOpacity(0.5);
});