options
本文回答: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]);
九、常见坑
- offset 单位:是像素,不是地理。
- 没有
autoPan:Popup 移到容器外不会自动平移(Leaflet 才有该选项);手动调map.flyTo补救。 - className 下选择器优先级:vjmap 内置样式选择器更具体时你的 CSS 会被覆盖;用
!important或更具体的选择器。 - maxWidth 传
100%:无效,必须具体像素 / none / em。