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 重新测量容器尺寸。
Nextjs App Router Audit
下载
审查 Next.js App Router 代码库，检查 React Server Component 边界错误、请求瀑布、客户端/服务端反模式以及 Core Web Vitals 风险...
✅ 推荐修复步骤（无需修改 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 渲染队列清空。
? 提示：若使用 Vue/React，应在 mounted/useEffect 中初始化地图，并在 watch/useEffect 监听侧边栏状态变更后调用 invalidateSize。原生 JS 场景下，本文方案已覆盖 99% 的类似问题。
