bootstrap-4 - 更新地图背景 onclick 选项卡按钮

Question

我正在使用 Bootstrap4 导航选项卡。如图所示，单击 Tab4 按钮时，我只得到一个带有缩放按钮的空白地图，但未加载地图。

任何人都可以建议如何在标签点击时加载地图。我试过下面的代码 -

 <div id="map4" class="map"></div>

  $('a[href="#tab4"]').one("click", function() {    
        var map4 = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              })
            ],
            target: 'map4',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

         map4.updateSize();
    });

我也尝试了以下代码 -

document.getElementById('tab4').onclick = function() {  
map4.getTargetElement().hidden = false;
// map resize
map4.updateSize();
map4.render();
map4.renderSync();
};

此代码在选项卡单击时加载地图背景，但我希望在选项卡按钮单击时加载。我正在使用openlayers 4。

任何帮助表示赞赏。谢谢！

标签： bootstrap-4tabsopenlayersnav