经纬志
首页 / Leaflet / 使用示例

Popup 定位

把标记放在贴右边缘的位置,逐项切换气泡的平移、偏移与宽度选项。

Leaflet 1.9.4 · 更新 2026-10-28
源码与运行效果
运行效果

说明

标记的经纬度由 containerPointToLatLng([宽 - 36, 高/2]) 反算, 保证气泡一打开就贴住右边缘。autoPan: true 时地图会自动向左平移, 把整个气泡让进视野;关掉后气泡右半部分被裁切。

所有选项在 openOn 时读取,因此每次切换都先 map.closePopup 再新建一个 L.popup。 直接修改已打开气泡的 options 不会触发布局重算。

选项本例取值效果
autoPantrue自动平移地图,让气泡完整可见
autoPanPadding[20, 20]平移后气泡与容器边缘留白
keepInViewfalse为 true 时禁止把气泡拖出视野
offset[0, -10]负值让气泡上移,避开图标
maxWidth / minWidth240 / 120限制内容换行宽度,防止长文本铺满全屏
closeButtontrue右上角关闭按钮

autoPan 会改变地图中心,用户点开气泡后视野会移动。 需要保持视野稳定的看板页面应关闭它,改为限制气泡宽度或把气泡放在固定侧栏。