Bootstrap模态框中Google Map重复打开不加载问题求助

我之前也踩过这个坑！Bootstrap模态框里的Google Map首次打开正常，关闭后再打开就加载失败，本质是地图渲染依赖的容器状态和尺寸没被正确处理，下面给你几个实用的解决思路：

为啥会出现这个问题？ #

Bootstrap模态框关闭时，会把整个模态框（包括里面的#map_canvas容器）设为display: none。Google Map初始化的时候需要读取容器的实际宽高来渲染地图，首次打开时容器是可见的，能拿到正确尺寸；但再次打开时，地图实例不会自动重新计算容器尺寸，就导致地图显示异常。另外如果每次打开都重复创建地图实例，还可能引发内存冲突。

解决方案来了！ #

方案一：复用地图实例，监听模态框显示事件重置尺寸 #

这个方案适合所有场景，性能也更好——我们只创建一次地图实例，每次打开模态框时让地图重新计算尺寸就行：

// 全局存一下地图实例，避免重复创建
let mapInstance = null;

// 初始化地图的函数
function initGoogleMap() {
  const defaultCenter = new google.maps.LatLng(37.7749, -122.4194); // 换成你需要的默认坐标
  const mapOptions = {
    center: defaultCenter,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  mapInstance = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

// 监听模态框的「完全显示」事件（一定要用shown.bs.modal，不能用show.bs.modal）
$('#yourModalId').on('shown.bs.modal', function () {
  if (!mapInstance) {
    // 第一次打开，初始化地图
    initGoogleMap();
  } else {
    // 后续打开，触发地图尺寸重置
    google.maps.event.trigger(mapInstance, 'resize');
    // 可选：重新设置地图中心，防止地图偏移
    mapInstance.setCenter(new google.maps.LatLng(37.7749, -122.4194));
  }
});

// 可选：模态框关闭时的清理（不用销毁实例，留着复用）
$('#yourModalId').on('hidden.bs.modal', function () {
  // 这里可以做一些非必要的清理，比如移除标记点之类的
});

方案二：每次打开都重新初始化地图（适合动态加载不同位置） #

如果你的列表项需要加载不同的地图位置，每次打开模态框时重新创建地图实例也可以，但要记得先销毁旧实例：

let mapInstance = null;

// 给列表里的「查看地图」按钮绑定点击事件
$('.view-map-btn').on('click', function () {
  // 从按钮的data属性里拿当前项的坐标（你可以根据自己的逻辑改）
  const targetLat = $(this).data('lat');
  const targetLng = $(this).data('lng');
  
  // 先打开模态框
  $('#yourModalId').modal('show');
  
  // 监听一次模态框显示事件（用.one避免重复绑定）
  $('#yourModalId').one('shown.bs.modal', function () {
    // 先清理旧的地图实例
    if (mapInstance) {
      google.maps.event.clearInstanceListeners(mapInstance);
      mapInstance = null;
    }
    
    // 创建新的地图实例
    const mapOptions = {
      center: new google.maps.LatLng(targetLat, targetLng),
      zoom: 12
    };
    mapInstance = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  });
});

样式小调整 #

建议把地图容器的宽度改成百分比，适配不同尺寸的模态框，同时确保模态框内容区域没有多余内边距：

#map_canvas {
  width: 100%; /* 比固定的770px更灵活 */
  height: 400px;
}

.modal-body {
  padding: 0; /* 可选，让地图充满模态框内容区 */
}

划重点！ #

• 一定要用shown.bs.modal事件，而不是show.bs.modal——只有前者能保证模态框完全显示，容器尺寸已经确定
• 触发google.maps.event.trigger(map, 'resize')是解决地图显示异常的核心操作
• 复用地图实例能减少资源消耗，比每次重新创建更高效

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