Question

根据Mapbox GL JS Quickstart指南，使用Mapbox CDN在网站上实施地图应该很简单。不幸的是，如果地图位于没有预定义宽度的Bootstrap模态内部，情况并非如此，该属性仅在打开模态后才设置。

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

另外，如果先打开模式，然后调整浏览器窗口的大小，地图将自动按预期适合整个水平空间，这似乎是JavaScript对resize事件的响应。

此处遵循相关代码。

HTML文件

sizeof(float)

CSS文件

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

JS文件

#map {
  height: 300px;
}

我尝试将Mapbox加载到Bootstrap 3.4.0模态中，就像以前使用Google Maps或Bing Maps时一样，但是在两种情况下都嵌入到iframe中。因此，我期望看到Mapbox像Google Maps和Bing Maps一样填充整个模式。

相反，Mapbox界面（左下方的徽标和右下方的信息按钮）被正确定位在模态内部及其边界处，但是包含地图的画布的位置不正确。

最后，为#map CSS属性设置预定义宽度不是解决方案。如果将宽度设置为以像素为单位的固定宽度，则可能无法在所有窗口尺寸上正确显示，而增加固定的百分比宽度（例如100％）并不能解决问题。

Answer 1

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

事实证明，模态缺少预定义的宽度，导致Mapbox无法选择，只能初始加载默认宽度（在这种情况下为400px）。由于打开模式不会触发Mapbox可能正在侦听的任何事件（例如调整窗口大小），因此，无论模式如何显示，Mapbox都会保留其默认宽度。

因此，要使Mapbox画布填充模式的整个宽度，必须将模式的开口（最终将为其设置宽度）链接到Mapbox的resize方法。

这里感兴趣的Bootstrap事件是"shown.bs.modal"，一旦向用户显示了模式并且CSS转换完成，就会触发该事件。这样可以确保已将宽度设置为模态。

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

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

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