create
本文回答:创建 Popup —— setHTML / setText / setDOMContent / setLngLat / addTo / remove / isOpen。
一、最简用法
const popup = new vjmap.Popup()
.setHTML("<b>Hello</b>")
.setLngLat([lng, lat])
.addTo(map);
二、CAD 坐标
popup.setLngLat(map.toLngLat([725.32, 18969.19]));
三、设置内容:三选一
3.1 HTML 字符串
popup.setHTML("<h3>站点</h3><p>温度 26℃</p>");
3.2 纯文本(自动转义)
popup.setText("<h3>不会当 HTML 处理</h3>"); // 显示为字面量
3.3 DOM 节点
const div = document.createElement("div");
div.innerHTML = "<b>Hello</b>";
popup.setDOMContent(div);
四、生命周期
const p = new vjmap.Popup().setHTML("Hi");
p.setLngLat([lng, lat]);
p.addTo(map);
p.isOpen(); // true
p.remove(); // 从地图移除
p.isOpen(); // false
// 再打开
p.addTo(map);
五、事件
p.on("open", () => console.log("打开"));
p.on("close", () => console.log("关闭"));
⚠️ close 在每次 remove() 时都触发(含未打开时调 remove、对已打开 popup 再 addTo 时);引擎还漏解绑 preclick,closeOnClick: true 的 popup 关闭后每次点地图都会再次触发 close。close 里的清理须幂等(let done = false; popup.on("close", () => { if (done) return; done = true; /* 清理 */ })),详见 dynamic-content §八。
六、点击地图自动弹
const popup = new vjmap.Popup({ closeButton: false });
map.on("click", e => {
popup.setLngLat(e.lngLat).setHTML("点击经纬度:" + e.lngLat).addTo(map);
});
七、点击图层自动弹
map.on("click", "my-layer", e => {
const f = e.features[0];
new vjmap.Popup()
.setLngLat(e.lngLat)
.setHTML(`名称:${f.properties.name}`)
.addTo(map);
});
八、延时关闭
setTimeout(() => popup.remove(), 3000);
九、切换显示
if (popup.isOpen()) popup.remove();
else popup.addTo(map);
十、常见坑
- 没 setLngLat 就 addTo → 不报错、静默不显示(
_update的守卫条件是(this._lngLat||this._trackPointer)&&this._content,lngLat 为空时直接跳过渲染)。必须先 setLngLat——症状是"popup 出不来"而非异常,调试时容易误判。 - setHTML 里写的
<script>:不执行。改用 setDOMContent 或popup.on("open", ...)后挂事件。 - 同一个 popup 多次 addTo:第二次 addTo 会先 remove 再 add,地图上只有一个。
- 多个 popup 叠加:多创建多 addTo 就能叠多个;但性能敏感时应复用。