Leaflet 地图初始渲染错位：解决左侧导航栏展开后地图定位偏移问题_技术教程

leaflet 地图在页面初次加载时出现左侧偏移（与左导航栏间存在异常间隙），但浏览器窗口缩放后自动恢复正常——这是因地图容器尺寸未就绪即初始化所致，需在 dom 布局稳定后显式触发 `map.invalidatesize()`。

该问题本质并非 CSS 错误，而是 Leaflet 的渲染机制限制：Leaflet 地图初始化时会立即读取容器元素的当前宽高并据此计算视图布局。而你的页面中，左侧导航栏（.navbar_left）为固定宽度（14rem），右侧过滤栏（.navbar_right）默认隐藏（display: none），且通过 jQuery .animate({ width: 'toggle' }) 动态展开。关键在于：

初始 HTML 加载时，.navbar_right 为 display: none，此时 #map 容器的可用宽度 = 100% - 14rem；
但 Leaflet 初始化代码（L.map("map", {...})）在 DOM 尚未完成最终布局（尤其是动画尚未触发、navbar_right 仍为隐藏状态）时已执行；
当用户点击展开右侧栏后，页面布局重排（reflow），#map 容器实际宽度收缩，但 Leaflet 并不自动感知这一变化，导致地图图层仍按旧尺寸渲染，视觉上表现为向右“挤压”出左侧空白间隙；
浏览器窗口 resize 事件会自动触发 Leaflet 内部的 invalidateSize，因此手动拖拽窗口后地图瞬间“归位”。

✅ 正确解决方案：在右侧导航栏展开/收起动画完成之后，主动通知 Leaflet 重新测量容器尺寸。

✅ 推荐修复步骤（无需修改 CSS 布局逻辑）

确保 map 实例为全局可访问变量（避免重复创建）；
在 toggleFilters() 动画回调中调用 map.invalidateSize()；
补充：首次初始化后也建议延迟一次 invalidateSize，确保 DOM 稳定。

// ✅ 修改后的 JS（整合并增强）
let map; // 全局声明

$(document).ready(function() {
  const $groesse = 6048;

  // 初始化地图（注意：此时 DOM 已就绪，但右侧栏仍隐藏）
  map = L.map("map", {
    crs: L.CRS.Simple,
    zoomControl: false,
    attributionControl: false
  });

  const bounds = L.latLngBounds([[0, 0], [$groesse, $groesse]]);
  const wantedZoom = map.getBoundsZoom(bounds, true);
  const center = bounds.getCenter();

  map.setView(center, wantedZoom);
  map.setMaxBounds(bounds);
  map.setMaxZoom(2);
  map.setMinZoom(-4);
  map.setZoom(-3);

  L.imageOverlay("", bounds).addTo(map);

  // ? 关键：首次渲染后延迟触发一次 invalidateSize，确保容器尺寸准确
  setTimeout(() => {
    map.invalidateSize(true); // true 表示带动画过渡（可选）
  }, 100);

  // ✅ 修正 toggleFilters：动画完成后刷新地图尺寸
  window.toggleFilters = function() {
    $('#navbar_right').animate({
      width: 'toggle'
    }, 300, 'swing', function() {
      // 动画结束回调：强制重绘地图容器
      map.invalidateSize(true);
    });
  };
});

⚠️ 同时建议优化的 CSS（辅助性，非必须但推荐）

你当前 CSS 中对 #map 的 flex-basis: max-content 和冗余 margin: auto 可能干扰 Flex 布局行为。建议简化为：

/* 替换原 #map 样式 */
#map {
  flex: 1; /* 占据剩余全部空间 */
  min-width: 0; /* 防止 flex item 溢出（关键！）*/
  height: calc(100vh - 0px); /* 显式高度，避免 flex 高度塌陷 */
}

并在父容器 #content 上添加 min-width: 0：

#content {
  display: flex;
  min-width: 0; /* ✅ 必须添加，防止子项 flex 不生效 */
}

? 总结

❌ 错误思路：靠 left: -112px 或硬调 translate3d 补偿——治标不治本，响应式下必然失效；
✅ 正确核心：Leaflet 不监听 DOM 尺寸变化，必须手动调用 map.invalidateSize()；
✅ 最佳实践：在所有可能改变地图容器尺寸的操作（如侧边栏切换、模态框打开、Tab 切换）后，均调用此方法；
✅ 补充技巧：使用 setTimeout(..., 0) 或 requestAnimationFrame 包裹 invalidateSize，可进一步确保 DOM 渲染队列清空。