Popup 主题
本文回答:Popup 主题总览 —— 信息弹框的创建、参数、跟随鼠标、与 Marker 绑定、CSS、动态内容。
Popup 是一个带尖角的信息气泡,可以显示 HTML / 文本 / DOM 节点。底层也是 DOM。
子项索引
| 文件 | 主题 |
|---|---|
| create | 基础创建:setHTML / setLngLat / addTo / remove |
| options | PopupOptions 完整参数(8 项) |
| track-pointer | 跟随鼠标 trackPointer() |
| marker-binding | 与 Marker 绑定(setPopup / togglePopup) |
| styling | className / maxWidth / 自定义 CSS |
| dynamic-content | setDOMContent / Vue / React 动态组件 |
最小示例
const popup = new vjmap.Popup({ closeButton: true, anchor: "bottom", offset: [0, -10] })
.setHTML("<b>Hello</b><br/>唯杰地图")
.setLngLat([lng, lat])
.addTo(map);
setTimeout(() => popup.remove(), 5000);
主题级 Top 3 陷阱
- Popup 与 Map 底层都是 DOM:频繁创建销毁开销大;推荐复用一个实例。
- setHTML 里的 JS 不执行:vjmap 内部用 innerHTML 渲染,
<script>不生效;用 setDOMContent 或 open 事件绑定。 - closeOnMove 误开:默认
false;若显式设true,地图移动时 popup 会被关,hover 场景保持默认。