HERE map在Bootstrap Tabs下加载不显示，窗口resize后才出现如何解决？

未激活状态的Bootstrap选项卡对应DOM默认设置为display: none，HERE地图初始化阶段无法读取容器的实际宽高，导致渲染异常；窗口resize操作会触发地图重新计算容器尺寸，因此调整窗口后才会正常显示。

• 方案1：延迟到选项卡首次激活时初始化地图
  跳过页面加载阶段的地图初始化逻辑，改为监听对应选项卡的激活事件，首次激活时再执行初始化，示例代码如下：

  // 地图初始化状态标记
  let isMapInited = false;
  // 替换为你的地图tab触发按钮的选择器
  const mapTabTrigger = document.querySelector('#your-map-tab-id');
  // 适配Bootstrap 5的tab激活事件，低版本Bootstrap可替换为'shown'
  mapTabTrigger.addEventListener('shown.bs.tab', () => {
    if (!isMapInited) {
      // 此处写入官方示例的HERE地图初始化完整逻辑
      // const map = new H.Map(document.getElementById('map-container'), ...)
      isMapInited = true;
    }
  })
  

• 方案2：选项卡激活时手动触发地图尺寸重算
  若需要页面加载时就完成地图初始化，可在选项卡激活回调中调用HERE地图内置的重绘方法，无需手动触发全局window resize事件：

  // 提前声明地图实例变量
  let hereMap;
  // 页面加载时初始化地图
  window.addEventListener('load', () => {
    // 官方示例的地图初始化逻辑，将实例赋值给hereMap变量
    // hereMap = new H.Map(...)
  })
  
  // 每次地图对应tab激活时，调用内置resize方法重绘
  document.querySelector('#your-map-tab-id').addEventListener('shown.bs.tab', () => {
    if (hereMap) {
      hereMap.getViewPort().resize();
    }
  })
  

• 方案3：CSS修改选项卡隐藏规则（无JS改动方案）
  覆盖Bootstrap默认的tab隐藏样式，让未激活选项卡保留宽高属性，仅移出可视区域：

  .tab-content > .tab-pane {
    display: block !important;
    position: absolute !important;
    top: -99999px !important;
    left: -99999px !important;
  }
  .tab-content > .tab-pane.active {
    position: static !important;
    top: auto !important;
    left: auto !important;
  }
  

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