如何让card容器内的Mapbox地图实现响应式自适应？

1. 调整CSS样式 #

替换你现有app.css中的对应代码即可解决固定宽度导致的移动端适配问题：

#map-container {
    position: relative;
    height: 180px;
    width: 100%;
    max-width: 600px;
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

调整说明：

• 把原固定宽度600px改为width: 100%，让地图容器自动占满父级card-body的宽度
• 保留max-width: 600px限制大屏下的最大宽度，避免地图过度拉伸变形
• #map改为绝对定位是Mapbox官方推荐的布局方式，可避免渲染偏移

2. 添加地图尺寸重绘逻辑 #

Mapbox默认不会自动检测容器尺寸变化，需要在你的地图初始化JS代码中添加监听逻辑，触发地图自动重绘：

// 你的原有地图初始化代码
const map = new mapboxgl.Map({
    container: 'map',
    // 其余你的原有配置项：style、center、zoom等保持不变
})

// 新增：监听地图容器尺寸变化，自动重绘地图
const mapContainer = document.getElementById('map-container')
const resizeObserver = new ResizeObserver(() => {
    map.resize()
})
resizeObserver.observe(mapContainer)

// 兼容旧浏览器兜底：监听窗口缩放事件触发重绘
window.addEventListener('resize', () => {
    map.resize()
})

可选优化：自适应宽高比 #

如果不需要固定180px高度，想要地图高度随宽度等比例缩放，可以把#map-container的固定高度替换为aspect-ratio属性：

#map-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9; /* 可自定义宽高比，比如4/3、2/1等 */
}

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