经纬志
首页 / MapLibre / 使用示例

可拖动标记

标记可以按住拖动,拖动过程中实时回读经纬度,松手后弹窗显示落点与相对中心的偏移。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

Marker 的 draggable 选项开启后,内部会接管指针事件并暂停地图平移,松手再恢复。

drag 事件触发频繁,只用来更新读数;落库、重算路径这类操作放在 dragend。

配置取值说明
draggabletrue允许拖动
setPopupPopup 实例点击标记时打开弹窗
dragend事件拖动结束再处理业务

Marker 已经处理了与地图平移的冲突,不需要自己 disable dragPan;自定义几何体的拖动则要手动处理。