如何触发在引导选项卡上调整mapbox大小单击

我在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>

这是可行的，但仅当我单击选项卡两次时：如果选项卡1处于活动状态，我单击选项卡2，选项卡内容显示时地图大小不正确，如果我再次单击选项卡2，它将调整大小

---

感谢若您有权访问map实例（new mapboxgl.map（）的返回值），您只需在更改选项卡后调用map的

resize

方法：

，其他任何可能遇到此问题的人：

无法访问map实例，意味着我们必须从

map.on（'load'，function（）{…}）

中定义对

map.resize（）

的调用

此外，我们需要确保在切换选项卡后调整大小。以下代码在引导动画完成后调整贴图的大小。像这样：

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();
    });
});

---

这就是问题所在，我无法访问该实例。这就是为什么我尝试的与我上面发布的链接类似：

map.on（'load'，function（）{…var fixButton=$（'a[data toggle=“tab”]”）…}

然后

fixButton.onclick=function（）{map.resize（）；}

。这会在单击选项卡标题时执行，但在调整选项卡内容div的大小之前执行。我应该在选项卡开关完成后运行resize。我上面的评论使google的搜索速度加快了一点。我将尝试一下show.bs.tab：

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();
    });
});