leaflet 地图容器在页面首次加载时位置偏移（如左侧留白），但手动调整浏览器窗口大小后自动修正——根本原因是地图初始化时父容器尺寸未稳定，导致 leaflet 无法正确计算渲染区域；需在 dom 布局就绪后显式触发 `map.invalidatesize()`。
该问题并非 CSS 错误或 Flex 布局冲突的直接结果，而是一个典型的 Leaflet 渲染时机陷阱：Leaflet 在 L.map("map", {...}) 初始化时，会立即读取容器元素（#map）的当前宽高与偏移量（getBoundingClientRect()），用于设置内部 Canvas、图层容器及平移坐标系。但在你的代码中，地图初始化发生在
底部、且紧邻 DOM 构建之后——此时：- 左侧导航栏（.navbar_left）和右侧可折叠面板（.navbar_right）的宽度尚未完成最终布局计算（尤其 #navbar_right 初始为 display: none，但其存在仍可能影响 flex 流）；
- Bootstrap 5 的 flex 容器（#content）可能因子元素动态状态（如 float: left/right 与 flex 混用）导致初始尺寸抖动；
- #map 元素本身设置了 margin-left: auto; margin-right: auto;，但在 flex 上下文中该声明无效，反而干扰了尺寸推导。
因此，地图首次渲染时获取到的是一个“不完整”的容器尺寸（例如宽度偏小、left 偏移异常），造成图层画布错位，表现为左侧出现意外空白（即你截图中 navbar 与地图之间的灰色间隙）。
✅ 解决方案：强制重置地图尺寸
在地图初始化完成后、且所有 DOM 布局（包括 navbar 展开/折叠逻辑）稳定后，必须手动调用 map.invalidateSize(true)。该方法会强制 Leaflet 重新测量容器尺寸，并重绘所有图层以适配新空间：
// ✅ 正确初始化顺序（放在所有 DOM 操作 & 样式应用之后）
var map = L.map("map", {
crs: L.CRS.Simple,
zoomControl: false,
attributionControl: false
});
// ... 设置 bounds, view, zoom 等（保持原有逻辑）
// ? 关键修复：等待 DOM 完全就绪并强制重绘
setTimeout(() => {
map.invalidateSize(true); // true 表示动画平滑过渡（可选）
}, 0);
// 或更稳妥地，在 window.load / DOMContentLoaded 后执行：
document.addEventListener('DOMContentLoaded', () => {
map.invalidateSize(true);
});⚠️ 额外优化建议（避免潜在干扰）：
-
清理冗余 CSS：
删除 #map 中无效的 margin-left/right: auto 和重复的 flex-grow: 1（flex: 1 已涵盖）；推荐使用纯 Bootstrap 5 Grid 替代混合 float + flex： -
确保 navbar 切换后同步刷新地图：
在 toggleFilters() 动画结束后调用 invalidateSize，防止折叠/展开导致容器尺寸变化后地图未响应：function toggleFilters() { $('#navbar_right').animate({ width: 'toggle' }, 300, 'swing', function() { map.invalidateSize(true); // ✅ 动画结束立即刷新 }); } 禁用可能干扰的全局样式：
移除 #map 的 background-image、background-attachment: fixed 等非 Leaflet 管理的背景属性——Leaflet 图层应完全由 L.imageOverlay 或 L.tileLayer 控制。
总结：Leaflet 不是“响应式框架”，它不会监听父容器尺寸变化。invalidateSize() 是开发者必须主动调用的“重绘开关”。只要确保该方法在 任意可能导致 #map 尺寸变化的操作后（初始化、navbar 切换、窗口 resize）被调用，即可彻底解决此类“仅缩放后才正常”的错位问题。
