Bootstrap 4大型模态框中Google地图全屏显示空白的解决方法

这个问题我之前帮不少开发者解决过，核心原因大多是Google地图的渲染逻辑和Bootstrap模态框的显示时机、尺寸变化没配合好，给你几个针对性的修复方案：

1. 确保地图在模态框完全显示后初始化 #

Bootstrap模态框默认是隐藏状态，页面加载时地图容器的宽高为0，此时初始化地图会导致地图获取错误的尺寸信息，全屏后就无法正确渲染。你需要借助模态框的shown.bs.modal事件（模态框完全显示后触发）来初始化地图：

// 假设你的模态框ID是mapModal，地图容器ID是googleMap
$('#mapModal').on('shown.bs.modal', function () {
  // 初始化Google地图
  const mapOptions = {
    center: new google.maps.LatLng(39.9042, 116.4074), // 示例坐标，替换成你的目标位置
    zoom: 12
  };
  const map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
});

2. 监听地图全屏事件，强制重绘 #

当地图切换到全屏模式时，容器尺寸会发生剧烈变化，Google地图不会自动触发重绘，这时需要手动触发resize事件，同时重置地图中心避免偏移：

// 在地图初始化后添加这个监听
google.maps.event.addListener(map, 'fullscreenchange', function() {
  // 触发地图重绘，让地图适配新的容器尺寸
  google.maps.event.trigger(map, 'resize');
  // 重新设置地图中心，防止全屏后位置偏移
  map.setCenter(new google.maps.LatLng(39.9042, 116.4074));
});

3. 解决层级冲突（如果全屏后地图被遮挡） #

Bootstrap模态框的默认z-index是1050，而Google地图的全屏控件或全屏容器的层级可能更低，导致地图被模态框背景遮挡。可以自定义CSS调整层级：

/* 调整地图全屏控件的层级 */
.gm-fullscreen-control {
  z-index: 1060 !important;
}
/* 调整地图全屏容器的层级 */
.gm-fullscreen-element {
  z-index: 1060 !important;
}

4. 避免重复初始化地图（可选优化） #

如果你的模态框会被多次打开，不要每次都创建新的地图实例，否则会造成性能浪费。可以用一个变量保存地图实例，判断是否已存在：

let mapInstance = null;
$('#mapModal').on('shown.bs.modal', function () {
  if (!mapInstance) {
    // 首次初始化地图
    const mapOptions = {
      center: new google.maps.LatLng(39.9042, 116.4074),
      zoom: 12
    };
    mapInstance = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
    
    // 绑定全屏重绘事件
    google.maps.event.addListener(mapInstance, 'fullscreenchange', function() {
      google.maps.event.trigger(mapInstance, 'resize');
      mapInstance.setCenter(new google.maps.LatLng(39.9042, 116.4074));
    });
  } else {
    // 模态框再次打开时，仅触发重绘并重置中心
    google.maps.event.trigger(mapInstance, 'resize');
    mapInstance.setCenter(new google.maps.LatLng(39.9042, 116.4074));
  }
});

按照这个步骤调整后，应该就能解决全屏空白的问题了。如果还是有问题，可以检查一下地图容器的CSS是否有固定宽高限制，或者是否有其他JS代码干扰了地图的渲染。

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