Here maps API在Bootstrap 5模态框中无法正常显示问题咨询

根因说明 #

Bootstrap 5模态框默认初始状态为display: none，若在模态框未完成展开渲染时就初始化地图，此时地图容器的宽高计算值为0，Here Maps无法获取正确的视口尺寸完成地图内容渲染，仅能加载基础默认图层，就是你遇到的显示异常问题。

修复方案 #

调整执行逻辑 #

将地图初始化的触发时机从页面加载阶段，改为模态框完全展开之后，依托Bootstrap 5内置的shown.bs.modal事件实现：

• 监听模态框展开完成事件，触发地图初始化
• 监听模态框关闭事件，清空容器避免重复渲染冲突
• 地图初始化完成后手动调用一次视口重绘方法，确保尺寸计算正确

完整修改代码 #

// 替换下方exampleModal为你实际使用的模态框元素ID
const targetModal = document.getElementById('exampleModal')
let map = null // 全局存储地图实例，避免重复初始化

// 模态框完全展开后初始化地图
targetModal.addEventListener('shown.bs.modal', () => {
  // 传入你实际需要的缩放层级、纬度、经度参数
  loadMap(12, 30.2741, 120.1551)
})

// 模态框关闭后清空地图容器
targetModal.addEventListener('hidden.bs.modal', () => {
  document.getElementById('mapInsideModal').innerHTML = ''
  map = null
})

// 优化后的地图加载函数
function loadMap(zoom, lat, lng) {
  // 已有地图实例则跳过初始化，避免重复渲染
  if (map) return

  const mapContainer = document.createElement('div')
  mapContainer.style.height = '300px'
  mapContainer.style.width = '600px'
  document.getElementById('mapInsideModal').appendChild(mapContainer)
   
  const defaultLayers = platform.createDefaultLayers()
  // 实例化地图
  map = new H.Map(mapContainer, defaultLayers.vector.normal.map, {
    zoom: zoom,
    center: { lng: lng, lat: lat }
  })
  // 手动触发视口重绘，适配容器尺寸
  map.getViewPort().resize()
  // 保留全局resize监听，适配窗口尺寸变化
  window.addEventListener('resize', () => map.getViewPort().resize())
  // 初始化默认UI
  H.ui.UI.createDefault(map, defaultLayers)
}

可选优化 #

如果每次打开模态框仅需要更新地图坐标不需要重新加载地图，可以仅在第一次打开模态框时初始化地图，后续直接调用map.setCenter({lat: xx, lng: xx})更新中心点即可，性能更佳。

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