如何在 bootstrap-tab 单击时触发 mapbox 调整大小

Question

我在 bootstrap-3 选项卡中有一个 mapbox 地图，如下所示：

    <div id='resizeMap' class='button'>Resize map</div>
    <div class="tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#tab-87" aria-controls="tab-87" role="tab" data-toggle="tab">
                    Tab-1
                </a>
            </li>
        
            <li role="presentation">
                <a href="#tab-1034" aria-controls="tab-1034" role="tab" data-toggle="tab">
                    Tab-2
                </a>
            </li>
        </ul>
    <div class="tab-content">
        <div role="tabpanel" id="tab-87" class="tab-pane in active fade">
            Some other content
        </div>

        <div role="tabpanel" id="tab-1034" class="tab-pane fade">
            <div class="map-container" style="position:relative;width:100%; height:500px;">
        </div>
    </div>
</div>

问题是当我单击第二个选项卡时（地图所在的位置，地图的尺寸不正确）。

我可以添加一个按钮来触发调整大小，如前所述here，但我不知道如何在单击选项卡时自动触发调整大小。

我还尝试“模拟”点击：

    $('a[data-toggle="tab"]').on( "click", function() {
        $("#resizeMap").click();
    });

这有效，但仅当我单击选项卡两次时：如果 tab-1 处于活动状态，我单击 tab-2，如果我单击 tab-2第二次，它调整大小。

谢谢

Answer 1

如果您有权访问地图实例（new mapboxgl.Map() 的 return 值），您可以在更改选项卡后调用地图的 resize 方法：https://www.mapbox.com/mapbox-gl-js/api/#map#resize

Answer 2

对于可能面临此问题的任何其他人：

无法访问地图实例，这意味着我们必须从 map.on('load', function(){...}) 中定义对 map.resize() 的调用。

此外，我们需要确保在 tab-switching 之后调整大小。以下代码在 bootstrap 动画完成后 调整地图大小 。像这样：

var map = new mapboxgl.Map({
    container: 'site-map', // container id
    style: 'mapbox://styles/mapbox/outdoors-v10',
    center: [1, 49],
    zoom: 5,
});
map.on('load', function () {
    map.addSource('data',{
      type: 'geojson',
      data: someData,
      cluster:true
    })
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(){
        map.resize();
    });
});

如何在 bootstrap-tab 单击时触发 mapbox 调整大小

How to trigger mapbox resize on bootstrap-tab click

mapbox

bootstrap-tabs

mapbox-gl-js