Mapbox GL JS地图无法填满容器Div问题求助（Chrome桌面端）

问题说明 #

使用Mapbox GL JS v2.13.0展示高尔夫球场地图时，Chrome桌面端频繁出现地图仅占容器一半空间的截断问题，Safari和Firefox则基本正常。尝试在load事件中调用map.resize()，但未解决问题。

完整地图代码：

mapboxgl.accessToken = '<token>';

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [-87.588567551718, 41.694580079560],
    zoom: 10
});

const marker = new mapboxgl.Marker()
    .setLngLat([-87.588567551718, 41.694580079560])
    .addTo(map);

map.addControl(new mapboxgl.FullscreenControl());
map.addControl(new mapboxgl.NavigationControl());

map.on('load', function () {
    map.resize();
});

可行解决思路 #

• 延迟执行resize方法
  Chrome中地图容器的尺寸可能在load事件触发时仍未完成计算，给浏览器留足渲染时间再调用resize：

map.on('load', function () {
    setTimeout(() => {
        map.resize();
    }, 100); // 可根据实际页面调整延迟时长
});

• 监听容器尺寸变化
  如果地图是动态加载（比如滚动到可视区域才显示），用ResizeObserver监听容器尺寸变化，实时触发resize：

const mapContainer = document.getElementById('map');
const resizeObserver = new ResizeObserver(() => {
    map.resize();
});
resizeObserver.observe(mapContainer);

• 固定容器CSS尺寸
  检查#map容器的CSS样式，确保尺寸明确：

  • 直接设置width和height（例如width: 100%; height: 400px;），避免依赖未定义的父容器布局
  • 不要在地图初始化时让容器处于display: none状态，若必须隐藏后显示，在显示完成后立即调用map.resize()

• 升级Mapbox GL JS版本
  v2.13.0存在版本局限性，后续版本可能修复了Chrome下的渲染bug，尝试升级到最新稳定版后测试问题是否消失。

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