Bootstrap模态框中Here Map重复堆叠问题排查与解决

地图堆叠的原因 #

核心问题是重复创建地图实例且未清理旧实例：

• 每次触发shown.bs.modal事件时，都会执行一次地图初始化代码，生成新的地图DOM元素和实例；
• 旧的地图实例没有被销毁，依然保留在模态框的地图容器内，多次点击后就会出现多层地图堆叠的情况。

而移除shown.bs.modal后地图空白，是因为模态框未完全渲染时，地图容器的宽高为0，地图初始化无法获取有效尺寸，导致渲染失败。

解决方法 #

提供两种可行方案，按需选择：

方案1：每次初始化前清理旧地图实例 #

通过全局变量跟踪当前地图实例，在新实例创建前销毁旧实例并清空容器：

// 全局存储当前地图实例
let currentMap = null;

// 绑定模态框显示完成事件
$('#modalId').on('shown.bs.modal', function() {
  const mapContainer = document.getElementById('mapContainer');
  
  // 清理旧地图
  if (currentMap) {
    // 不同地图API的销毁方法略有差异，以下以Google Maps为例
    currentMap.remove();
    mapContainer.innerHTML = '';
    currentMap = null;
  }
  
  // 初始化新地图
  currentMap = new google.maps.Map(mapContainer, {
    center: { lat: <?php echo $center_lat; ?>, lng: <?php echo $center_lng; ?> },
    zoom: 12
  });
  
  // 添加PolyLine路线
  const polyline = new google.maps.Polyline({
    path: <?php echo $jsline; ?>,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  polyline.setMap(currentMap);
});

方案2：复用地图实例，仅更新路线和中心点 #

更高效的方式是只初始化一次地图，每次点击模态框时仅更新地图的中心点和PolyLine：

// 全局存储地图实例和当前路线
let map = null;
let currentPolyline = null;

// 页面加载时初始化地图（容器可隐藏，后续调整）
$(document).ready(function() {
  const mapContainer = document.getElementById('mapContainer');
  map = new google.maps.Map(mapContainer, {
    center: { lat: 0, lng: 0 },
    zoom: 12
  });
});

// 模态框显示完成事件
$('#modalId').on('shown.bs.modal', function() {
  // 更新地图中心点
  map.setCenter({ lat: <?php echo $center_lat; ?>, lng: <?php echo $center_lng; ?> });
  
  // 移除旧路线
  if (currentPolyline) {
    currentPolyline.setMap(null);
    currentPolyline = null;
  }
  
  // 添加新路线
  currentPolyline = new google.maps.Polyline({
    path: <?php echo $jsline; ?>,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  currentPolyline.setMap(map);
  
  // 触发地图尺寸自适应（模态框显示后容器尺寸变化）
  google.maps.event.trigger(map, 'resize');
});

注意：如果使用的是其他地图API（如高德、百度），只需对应调整地图实例的销毁、更新方法即可，核心逻辑一致。

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