首页 / MapLibre / 使用示例
弹出卡片
点击橙色站点,弹出一张带标题、数值条与时间的卡片。 内容用 DOM 节点构建,不是拼接字符串,数值变化时也能直接复用。
源码与运行效果
说明
卡片在点击回调里现场组装:头部是标题,中间是数值与进度条,
底部是更新时间。setDOMContent 直接接管节点,
不需要把 HTML 转成字符串再解析。
offset: 12 把卡片抬离图标,避免气泡尖端压住圆点。
关闭按钮隐藏、点击地图关闭,是「单卡片」场景最省心的组合。
| 选项 | 取值 | 作用 |
|---|---|---|
setDOMContent | 节点 | 保留事件与实时更新能力 |
closeButton | false | 卡片自己承担关闭交互 |
closeOnClick | true | 点地图空白处收起 |
offset | 12 | 避让图标,只在构造时生效 |
maxWidth | 300px | 限制长文本换行宽度 |
className | station-popup | 为自定义样式提供命名空间 |
复用同一个 Popup 实例,只更新坐标与内容,比每次新建更省。 新建时旧实例不会自动销毁,容易残留多个打开的气泡。
卡片里如果再放按钮,需要在点击回调中对事件调用
stopPropagation,否则会被地图的 closeOnClick 一并处理。