唯杰地图 logo唯杰地图
VJMAP
EN

create

vjmap/references/popup/create.md 2.8 KB105 行
原文

本文回答:创建 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);

十、常见坑

  1. 没 setLngLat 就 addTo → 不报错、静默不显示(_update 的守卫条件是 (this._lngLat||this._trackPointer)&&this._content,lngLat 为空时直接跳过渲染)。必须先 setLngLat——症状是"popup 出不来"而非异常,调试时容易误判。
  2. setHTML 里写的 <script>:不执行。改用 setDOMContent 或 popup.on("open", ...) 后挂事件。
  3. 同一个 popup 多次 addTo:第二次 addTo 会先 remove 再 add,地图上只有一个。
  4. 多个 popup 叠加:多创建多 addTo 就能叠多个;但性能敏感时应复用。