调整地图容器尺寸后地图未同步更新大小是什么原因？

问题根因 #

绝大多数前端地图SDK（如Leaflet、Mapbox、高德地图、百度地图、谷歌地图等）初始化时仅会读取一次容器宽高，后续容器尺寸动态变化时地图不会自动感知并重新计算渲染范围，因此会出现容器扩展后地图仅保留初始加载尺寸、其余区域空白的问题。

解决方案 #

在容器尺寸修改的逻辑后，调用对应地图SDK提供的尺寸重算接口即可，同时需要预留足够的时间等待容器CSS动画执行完成，避免读取到旧的容器尺寸。

各常见地图SDK的重算接口： #

• Leaflet：map.invalidateSize()
• Mapbox GL JS：map.resize()
• 高德地图JS API：map.onResize()
• 百度地图JS API：map.resize()
• 谷歌地图JS API：google.maps.event.trigger(map, 'resize')

修改后的代码示例 #

注意：代码中的map变量需要替换为你实际初始化地图时定义的地图实例名

$(".extender").on("click", () => {
  if ($(".tabs").hasClass("col-lg-6")) {
    $(".introduce").attr("hidden", "");
    $(".tabs").removeClass("col-lg-6").addClass("col-lg-12");
    $(".extender").text("Encoger");
  } else if ($(".tabs").hasClass("col-lg-12")) {
    $(".introduce").removeAttr("hidden");
    $(".tabs").removeClass("col-lg-12").addClass("col-lg-6");
    $(".extender").text("Extender");
  }
  // 等待容器尺寸变更动画完成后触发地图重绘适配
  setTimeout(() => {
    // 根据你使用的地图类型选择对应接口，其余可删除
    map.invalidateSize(); 
    // map.resize(); 
    // google.maps.event.trigger(map, 'resize');
  }, 200)
})

扩展说明 #

如果切换标签页时也出现地图展示异常的问题，在标签切换的回调逻辑中同样调用上述重算接口即可解决。

内容的提问来源于stack exchange，提问作者Ander Canales Medina