首页 / MapLibre / 使用示例
弹窗
点击地图任意位置,弹窗显示该点的经纬度与当前缩放。 弹窗复用一个实例,关闭后再打开不会残留旧节点。
源码与运行效果
说明
弹窗构造时把 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);
});
| 设置 | 本示例 | 效果 |
|---|---|---|
offset | 14 | 向上偏移,不压住锚点 |
closeOnClick | false | 点击地图后弹窗跟随移动 |
maxWidth | 260px | 长文本自动换行 |
className | pop | 用于自定义字号与行高 |
弹窗内容里的经纬度来自 e.lngLat,保留五位小数,
与标记、数据源的坐标精度一致。需要复制坐标时,用
setDOMContent 自己创建按钮,比在 HTML 字符串里拼事件更可靠。
同时只保留一个弹窗,内存与视觉都更干净。
如果确实需要多个,用完调用 remove(),不要只靠关闭按钮隐藏。