Javascript Mapbox GL JS画布在引导模式下未正确显示

根据指南，使用Mapbox CDN在网站上实现地图应该很简单。不幸的是，如果映射位于引导模式内，则情况并非如此，引导模式没有预定义的宽度，该属性仅在模式打开后设置

结果是加载了默认宽度为400px的Mapbox画布，这可能与模式宽度不同，并创建了糟糕的用户体验

此外，如果打开模式，然后调整浏览器窗口的大小，则贴图会按照预期自动适应整个水平空间，这似乎是对调整大小事件的JavaScript响应

下面是相关代码

HTML文件

<div id='map'></div>

JS文件

mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
    container: 'map',
    center: [..., ...],
    zoom: 10,
    style: 'mapbox://styles/mapbox/streets-v11'
});

我曾尝试在Bootstrap3.4.0模式中加载Mapbox，就像我以前在使用Google地图或Bing地图时所做的那样，但在这两种情况下都嵌入在iframe中。因此，我希望看到Mapbox像Google地图和Bing地图一样充满整个模式

相反，Mapbox界面左下角徽标和右下角信息按钮在模式内部的边界处正确定位，但包含地图的画布位置不正确

---

最后，为map CSS属性设置预定义的宽度不是一个解决方案。如果宽度设置为以像素为单位的固定宽度，则可能无法在所有窗口大小上正确显示，而添加固定百分比宽度（例如100%）并没有起到作用。

JavaScript库和的类似问题已经解决

事实证明，由于缺少模式的预定义宽度，Mapbox没有任何选项，只能在这种情况下最初加载默认宽度400px。因为打开模式不会触发Mapbox可能正在侦听的任何事件，例如窗口大小调整，所以Mapbox在显示后将保持其默认宽度，而不管为模式设置的大小如何

因此，要使Mapbox画布填充整个模态宽度，必须将模态的开口链接到Mapbox resize方法，该开口最终将设置宽度

这里感兴趣的引导事件是，一旦模式显示给用户并且CSS转换完成，就会触发。这可以保证已将宽度设置为模式

解决方案是在JS文件中的“map”变量定义后添加以下代码：

$('#modalID').on('shown.bs.modal', function() {
    map.resize();
  });

---

确保将“modalID”更改为用于识别相应模态的相同“id”。

谢谢！我面临着完全相同的问题，你的回答解决了它！很乐意帮忙

$('#modalID').on('shown.bs.modal', function() {
    map.resize();
  });