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()的返回值），则可以在更改标签后调用地图的resize方法：https://www.mapbox.com/mapbox-gl-js/api/#map#resize

Answer 2

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

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

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

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 resize

2 个答案: