唯杰地图 logo唯杰地图
VJMAP
EN

Popup 主题

vjmap/references/popup/overview.md 1.4 KB34 行
原文

本文回答: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 陷阱

  1. Popup 与 Map 底层都是 DOM:频繁创建销毁开销大;推荐复用一个实例。
  2. setHTML 里的 JS 不执行:vjmap 内部用 innerHTML 渲染,<script> 不生效;用 setDOMContent 或 open 事件绑定。
  3. closeOnMove 误开:默认 false;若显式设 true,地图移动时 popup 会被关,hover 场景保持默认。