根本原因是modal默认结构限制地图容器尺寸，导致初始化读取宽高为0；正确做法是监听shown.bs.modal事件后调用map.invalidatesize()并确保地图容器父级有明确高度。
Modal里地图不显示或只显示左上角一小块
根本原因是Bootstrap Modal默认给.modal-dialog加了max-width和margin，同时.modal-content有overflow: hidden——地图容器一旦设为width: 100%; height: 100%，实际渲染区域就被裁剪或限制在窄小框内。地图库（如Leaflet、Mapbox）初始化时读取父容器尺寸，此时拿到的是被压缩后的宽高，后续resize监听也常失效。
- 临时方案：手动给
.modal-content加overflow: visible !important，但治标不治本，滚动、遮罩层交互会出问题 - 推荐做法：不依赖Modal默认结构，把地图容器直接塞进
.modal-body，并用CSS强制撑满可用空间 - 关键CSS要加在地图容器上：
height: calc(100vh - 180px)（减去header/footer/modal padding），而不是100% - Leaflet用户务必在
shown.bs.modal事件后调用map.invalidateSize()，否则瓦片错位、控件偏移
全屏地图需要覆盖Modal遮罩层吗
不需要，也不建议。Bootstrap的.modal-backdrop是独立DOM节点，z-index通常为1050；而地图容器如果设z-index: 1060+强行盖上去，会导致点击穿透、滚动异常、关闭按钮失灵。正确思路是让地图“在Modal内部视觉全屏”，而非物理脱离Modal层级。
- 给
.modal-dialog加margin: 0和width: 100% !important - 给
.modal-content设border-radius: 0和height: 90vh（避免顶到浏览器顶部） - 地图容器设
height: 100%，且父级.modal-body必须有明确高度（不能靠内容撑开） - 若需“伪全屏”体验，可监听
resize并在Modal显示后立即触发map.invalidateSize()
Leaflet/Mapbox在Modal中初始化失败的常见报错
最典型的是Map container not found或Invalid LngLat object，本质都是容器未就绪或尺寸为0。Modal的show是异步过程，$('#map').html('...')后立刻new L.Map(...)大概率失败。
- 必须等Modal完全显示后再初始化地图：监听
shown.bs.modal事件，不是show.bs.modal - 确保地图容器DOM已存在且可见：
if ($('#map').is(':visible') && $('#map').width() > 0) { initMap(); } - Mapbox用户注意：
map.on('load', ...)不能替代容器尺寸检查，load事件只表示样式加载完成 - React/Vue项目里，别在组件
mounted钩子直接init，得结合Modal的visible状态做条件判断
移动端Modal地图触摸拖动失效
因为Bootstrap Modal默认禁用了touch-action: none（防双指缩放干扰表单），而地图需要pan-x pan-y。iOS Safari尤其敏感，手指一滑Modal就跟着上下滚动，地图不动。
- 在地图容器上加
style="touch-action: pan-x pan-y"，不要写在.modal-body或.modal-content上 - 同时移除
.modal-dialog的touch-action: none（Bootstrap 5.3+已修复，旧版需覆盖） - Android WebView下若仍有卡顿，尝试给地图容器加
-webkit-overflow-scrolling: touch - 避免在Modal里嵌iframe地图（如Google Maps embed），其手势控制与Bootstrap冲突更难调试
地图容器尺寸计算和事件时机是硬骨头，别指望一次CSS搞定。每次Modal show后都手动invalidateSize()，比折腾z-index安全得多。
