唯杰地图 logo唯杰地图
VJMAP
EN

options

vjmap/references/popup/options.md 4.0 KB132 行
原文

本文回答:PopupOptions 完整参数表 —— 8 个字段,含默认值、效果。

完整参数表

参数 类型 默认 说明
closeButton boolean true 右上角的 × 关闭按钮
closeOnClick boolean true 点击地图任意处(含要素、Marker)即关闭(挂在地图 preclick 上);点击 popup 自身不关
closeOnMove boolean false 地图移动(平移/缩放)时关闭
focusAfterOpen boolean true 打开后聚焦第一个可聚焦元素(无障碍)
anchor "center" / 8 向 不传(按位置自动选) 尖尖方向(相对于 lngLat 的位置);不要写 anchor: "auto"(无此值,定位时抛错)
offset number / [x, y] / 对象 0 偏移(像素)
className string — 额外 CSS 类名
maxWidth string "240px" 最大宽度(CSS 值)

PopupOptions 共 8 个字段(见 d.ts:14327-50)。没有 autoPan——那是 Leaflet 的概念;popup 被容器裁剪时不会自动平移地图,需要时手动 map.flyTo/easeTo。

一、closeButton

new vjmap.Popup({ closeButton: false })     // 不要 × 按钮

二、closeOnClick / closeOnMove

组合 行为
true, false(默认) 点地图任意处关闭,拖地图不关
true, true 点地图/拖动都关
false, false 只有点 × 关闭(适合固定 popup)
false, true 拖动关闭,点地图不关

三、anchor

九向枚举:

top-left   top     top-right
left       center  right
bottom-left bottom bottom-right

不传时,vjmap 会自动选(根据位置和地图容器,可能得到 bottom-left 等角向)。没有 "auto" 这个值——写 anchor: "auto" 时内部按 anchor 名取偏移量取到 undefined,定位时抛 TypeError。

四、offset

三种形式:

4.1 number

new vjmap.Popup({ offset: 25 });     // 所有方向统一 25px

4.2 [x, y]

new vjmap.Popup({ offset: [0, -40] });  // 固定偏移

4.3 对象(按 anchor 不同偏移)

const markerHeight = 50, markerRadius = 10, linearOffset = 25;
const popupOffsets = {
  top: [0, 0],
  "top-left": [0, 0],
  "top-right": [0, 0],
  bottom: [0, -markerHeight],
  "bottom-left": [linearOffset, -(markerHeight - markerRadius + linearOffset)],
  "bottom-right": [-linearOffset, -(markerHeight - markerRadius + linearOffset)],
  left: [markerRadius, -(markerHeight - markerRadius)],
  right: [-markerRadius, -(markerHeight - markerRadius)]
};
new vjmap.Popup({ offset: popupOffsets });

精确控制每个方向下的偏移,专为 Marker 配合设计。

五、className

new vjmap.Popup({ className: "alert-popup" });
.alert-popup .vjmapgis-popup-content { background: #ff0; color: #000; }

运行时:

popup.addClassName("selected");
popup.removeClassName("selected");
popup.toggleClassName("highlight");

六、maxWidth

new vjmap.Popup({ maxWidth: "300px" });
new vjmap.Popup({ maxWidth: "none" });       // 不限

运行时:

popup.setMaxWidth("400px");
popup.getMaxWidth();

七、focusAfterOpen

new vjmap.Popup({ focusAfterOpen: false });

无障碍场景:开 popup 后 screen reader 自动读第一个可聚焦元素。一般设 true 即可;但嵌入 input 会抢焦点,这时要设 false。

八、setOffset 运行时改

popup.setOffset([0, -50]);

九、常见坑

  1. offset 单位:是像素,不是地理。
  2. 没有 autoPan:Popup 移到容器外不会自动平移(Leaflet 才有该选项);手动调 map.flyTo 补救。
  3. className 下选择器优先级:vjmap 内置样式选择器更具体时你的 CSS 会被覆盖;用 !important 或更具体的选择器。
  4. maxWidth 传 100%:无效,必须具体像素 / none / em。