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

弹出卡片

点击橙色站点,弹出一张带标题、数值条与时间的卡片。 内容用 DOM 节点构建,不是拼接字符串,数值变化时也能直接复用。

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

说明

卡片在点击回调里现场组装:头部是标题,中间是数值与进度条, 底部是更新时间。setDOMContent 直接接管节点, 不需要把 HTML 转成字符串再解析。

offset: 12 把卡片抬离图标,避免气泡尖端压住圆点。 关闭按钮隐藏、点击地图关闭,是「单卡片」场景最省心的组合。

选项取值作用
setDOMContent节点保留事件与实时更新能力
closeButtonfalse卡片自己承担关闭交互
closeOnClicktrue点地图空白处收起
offset12避让图标,只在构造时生效
maxWidth300px限制长文本换行宽度
classNamestation-popup为自定义样式提供命名空间

复用同一个 Popup 实例,只更新坐标与内容,比每次新建更省。 新建时旧实例不会自动销毁,容易残留多个打开的气泡。

卡片里如果再放按钮,需要在点击回调中对事件调用 stopPropagation,否则会被地图的 closeOnClick 一并处理。