Javascript mapbox.js未完全在引导模式内呈现

我正在尝试使用创建经纬度选择器，我需要将此地图放在一个模式框中，当我单击“选择位置”按钮时，该框会打开。但当此模式打开时，贴图不会完全渲染

这是我的代码：

<div class="modal fade" id="chooseLocation" tabindex="-1" role="dialog" aria-labelledby="chooseLocation" aria-hidden="true">
    <div class="Cadd-event-modal" style="width: 600px; margin: 0px auto; margin-top: 10%;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title Cfont-1">Choose location</h4>
        </div>
        <div class="modal-body" style="width: 500px; margin: 0px auto;">

            <div id='map'></div>
            <div class='map-overlay'>
                <label for='latitude'>latitude</label><br />
                <input type='text' size='5' id='latitude' /><br />
                <label for='longitude'>longitude</label><br />
                <input type='text' size='5' id='longitude' />
            </div>


        </div>
        <div class="model-footer"></div>
    </div>
</div>

还有按钮动作

$('#chooseLocation-btn').click(function(){
   $('#chooseLocation').modal('show');
});  

---

我不确定你的问题是否已经解决了。然而，我也面临同样的问题，我通过使用以下代码修复了它。发布答案，因为它可能会帮助其他人

$('#chooseLocation').on('shown.bs.modal', function () { // chooseLocation is the id of the modal.
    map.invalidateSize();
 });

---

下面是一个使用mapbox gl js和

map.resize（）

---

后代注意：如果您的地图正在加载到隐藏的div中，并且

resize（）

和

invalidateSize（）

都不起作用，请尝试在

map

元素上设置

overflow:visible

内联

---

我在引导模式中加载地图，这意味着它在加载时隐藏。当地图在加载时隐藏时，它无法找到其宽度或高度来定义地图元素的边界。设置

overflow:visible

似乎允许执行

resize（）

功能。但这可能会导致布局问题，因为地图将延伸到地图元素的边界之外。您可以尝试将地图包装到另一个div中，改为使用

overflow:hidden

。

Hi！Tnx的答案。我不得不切换到谷歌地图，因为我的客户告诉我使用谷歌地图，我也遇到了同样的问题。我记得触发boostrap事件时我使用了resize（），所以。。。我想类似的东西也应该用在mapbox.js上。这和我在谷歌地图的bootstrap3标签上遇到的问题是一样的。这是我的解决方案，对我有效。代替

$（'a[href=“#Location”]”）。on（'show.bs.tab'，function（e）{

使用

$（'#chooseLocation'）。on（'show.bs.modal'，function（）{

开始工作。别忘了使用

google.maps.visualRefresh=true；

$('#chooseLocation').on('shown.bs.modal', function () { // chooseLocation is the id of the modal.
    map.invalidateSize();
 });

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
  map.resize();
});