Leaflet地图仅限制水平（经度）平移的实现问题求助

我明白你的需求——要锁住地图的经度范围（不让左右拖出-180到180），但纬度方向可以随意拖动，这样点击特定位置显示图片的体验不受影响。之前用maxBounds的方法之所以没达到预期，是因为Leaflet的墨卡托投影本身有内置的纬度限制（大约-85.0511°到85.0511°），哪怕你把maxBounds的纬度设到-150°和150°，地图也没法渲染超出这个内置范围的区域，所以垂直拖动还是会被“隐性”限制。

这里给你两个可行的方案：

方案1：通过moveend事件实时修正经度位置 #

这个方法是在地图拖动结束后，检查当前视图的经度范围，如果超出[-180, 180]就把地图拉回合规区域，纬度完全不干涉。代码示例：

// 初始化地图
const map = L.map('your-map-container-id').setView([0, 0], 2);

// 添加你使用的底图图层（比如OpenStreetMap）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// 监听地图移动结束事件
map.on('moveend', () => {
  const currentBounds = map.getBounds();
  const westLng = currentBounds.getWest();
  const eastLng = currentBounds.getEast();

  // 检查经度是否越界
  if (westLng < -180 || eastLng > 180) {
    const currentCenter = map.getCenter();
    let correctedLng = currentCenter.lng;

    // 将经度修正到[-180, 180]范围内
    correctedLng = Math.max(-180, Math.min(180, correctedLng));

    // 保持纬度不变，重置地图中心
    map.setCenter([currentCenter.lat, correctedLng]);
  }
});

方案2：实时拦截拖动操作（更流畅） #

如果觉得拖动结束后再修正有点生硬，可以用drag事件实时拦截，在拖动过程中就阻止越界：

map.on('drag', () => {
  const currentBounds = map.getBounds();
  const isLngOutOfRange = currentBounds.getWest() < -180 || currentBounds.getEast() > 180;

  if (isLngOutOfRange) {
    // 取消当前拖动动作
    map.dragging._draggable._cancelDrag();
    
    // 修正经度位置，纬度保持不变
    const currentCenter = map.getCenter();
    const correctedLng = Math.max(-180, Math.min(180, currentCenter.lng));
    map.setView([currentCenter.lat, correctedLng], map.getZoom());
  }
});

这两个方案都能精准实现“锁经度、放纬度”的需求，你可以根据自己的交互偏好选择。如果需要允许地图在垂直方向拖出可视区域（显示空白），这两个方案也完全支持，不会像maxBounds那样受限于墨卡托投影的纬度范围。

内容的提问来源于stack exchange，提问作者Martin J