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

弹窗

点击地图任意位置,弹窗显示该点的经纬度与当前缩放。 弹窗复用一个实例,关闭后再打开不会残留旧节点。

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

说明

弹窗构造时把 closeOnClick 设为 false, 这样点击地图不会先关闭再打开,而是直接移动到新位置。 关闭按钮保留,用户仍可主动收起。

var popup = new maplibregl.Popup({ offset: 14, closeOnClick: false });

map.on('click', function (e) {
  popup.setLngLat(e.lngLat)
       .setHTML('<b>点击位置</b>' + e.lngLat.lng)
       .addTo(map);
});
设置本示例效果
offset14向上偏移,不压住锚点
closeOnClickfalse点击地图后弹窗跟随移动
maxWidth260px长文本自动换行
classNamepop用于自定义字号与行高

弹窗内容里的经纬度来自 e.lngLat,保留五位小数, 与标记、数据源的坐标精度一致。需要复制坐标时,用 setDOMContent 自己创建按钮,比在 HTML 字符串里拼事件更可靠。

同时只保留一个弹窗,内存与视觉都更干净。 如果确实需要多个,用完调用 remove(),不要只靠关闭按钮隐藏。