如何阻止Leaflet JS地图缩放超出南北极边界？已设maxBounds仅平移有效

要彻底阻止地图显示南北极以外的区域，仅靠maxBounds是不够的——它只限制拖拽平移，缩放操作仍可能让视图超出边界。以下是标准实现方式：

1. 配置精确边界与粘性参数 #

首先设置匹配墨卡托投影极限的纬度边界，并开启边界粘性，彻底禁止拖拽出边界：

const map = L.map('map', {
  // 墨卡托投影的纬度极限，避免出现拉伸空白
  maxBounds: [
    [-85.05112877980659, -180],
    [85.05112877980659, 180]
  ],
  // 完全锁定边界，拖拽无法超出（0=无粘性，1=完全限制）
  maxBoundsViscosity: 1.0,
  // 限制最大缩放级别，避免过度放大导致边缘空白
  maxZoom: 18
});

2. 监听缩放事件修正视图 #

部分缩放操作（比如双击边缘区域放大）仍可能让视图超出边界，需要监听缩放结束事件，自动将视图拉回允许范围：

map.on('zoomend', () => {
  const currentView = map.getBounds();
  const allowedBounds = map.getMaxBounds();
  
  // 检查当前视图是否越界
  if (!allowedBounds.contains(currentView)) {
    // 自动调整视图到合法边界内
    map.fitBounds(allowedBounds, { padding: [0, 0] });
  }
});

补充说明 #

• 选用85.0511度的原因：Leaflet默认的墨卡托投影无法表示超过±85.0511度的纬度，超出该值会出现地图拉伸或空白区域，用这个精确值能完美匹配投影极限。
• maxBoundsViscosity：控制拖拽到边界时的阻力，设为1.0会让地图完全无法被拖出边界，0则无限制。
• maxZoom：可根据业务需求调整，避免过度放大后，即使中心点在边界内，也会显示边界外的空白。

内容的提问来源于stack exchange，提问作者Simon Harvey