首页 / MapLibre / 使用示例

添加标记

六个城市各放一个标记，颜色区分，点击后读取名称与坐标。标记是 DOM 元素，适合数量不多但需要交互的场景。

MapLibre GL JS 4.x · 更新 2026-10-27

源码与运行效果

运行效果

说明

每个标记用 new maplibregl.Marker({ color }) 创建，链式 setLngLat 与 addTo 完成放置。点击事件绑在 getElement() 返回的 DOM 上，因为 Marker 本身不派发通用的 click 事件。

var m = new maplibregl.Marker({ color: '#1f5fd0' })
  .setLngLat([116.391, 39.907])
  .addTo(map);

m.getElement().addEventListener('click', function () {
  console.log('点击了北京');
});

操作	方法	注意
放置	`addTo(map)`	不调用则不会显示
移动	`setLngLat()`	接受数组或 LngLat
移除	`remove()`	清空时逐个移除，避免 DOM 残留
点击	元素上的 DOM 事件	不是 Marker 的 click 事件

清空时先遍历移除再重置数组，旧标记的 DOM 会被一并删掉。只把数组置空不移除，页面上仍能看到标记。

标记数量到几百个时会明显拖慢拖动，因为每个都要参与布局。大批量点位换成 circle 图层，交互用图层级事件实现。