海量标注 LabelMarker 最后更新时间: 2023年03月27日

创建地图

const map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923],  //设置地图中心点坐标
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D'  //设置地图模式
});

设置一个图标对象

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 
};

设置文字对象

const text = {
    content: '中邮速递易', // 要展示的文字内容
    direction: 'right', // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
    offset: [-20, -5], // 在 direction 基础上的偏移量
    style: { // 文字样式       
        fontSize: 12 ,// 字体大小        
        fillColor: '#22886f', // 字体颜色  
        strokeColor: '#fff', // 描边颜色
        strokeWidth: 2,  // 描边宽度
    }
}

创建 LabelMarker 实例

const labelMarker = new AMap.LabelMarker({
    name: '标注2', // 此属性非绘制文字内容，仅最为标识使用
    position: [116.466994, 39.984904],
    zIndex: 16,
    icon: icon, // 将第一步创建的 icon 对象传给 icon 属性
    text: text,// 将第二步创建的 text 对象传给 text 属性
});

创建 LabelsLayer 图层

LabelsLayer 图层是承载 LabelMarker 的图层，所有创建的 LabelMarker 需要添加到 LabelsLayer 图层上才能最终展示在地图上。

const labelsLayer = new AMap.LabelsLayer({
    zooms: [3, 20],
    zIndex: 1000,
    collision: true,  // 该层内标注是否避让
    allowCollision: true, // 设置 allowCollision：true，可以让标注避让用户的标注
});

将 LabelMarker 添加到 LabelsLayer 上

将上面第五步已创建的 LabelMarker 对象添加到 第六步创建的 LabelsLayer 图层

// 添加一个 labelMarker
labelsLayer.add(labelsMarker);

labelsLayer.add([labelsMarker1, labelsMarker2])

labelsLayer.remove(labelsMarker)

labelsLayer.remove([labelsMarker1, labelsMarker2])

将 LabelsLayer 添加到地图实例

map.add(labelsLayer);

为 LabelMarker 添加事件

LabelMarker 与其它覆盖物添加事件的方式一致，使用 on() 的方式添加事件

labelMarker.on('click', function(e){
    labelMarker.setOpacity(0.5);
});