根据Mapbox GL JS Quickstart指南,使用 Mapbox CDN 在网站上实现 map 应该很简单。不幸的是,如果 map 位于 Bootstrap 模态框内,则情况并非如此,该模态框没有预定义的宽度,该属性仅在打开模态框后设置。
结果是加载了一个默认宽度为 400px 的 Mapbox Canvas ,这可能与模态宽度不同,并造成糟糕的用户体验。
此外,如果打开模式然后调整浏览器窗口的大小, map 会按预期自动适应整个水平空间,这似乎是 JavaScript 对调整大小事件的响应。
下面是相关代码。
HTML 文件
<div id='map'></div>
CSS 文件
#map {
height: 300px;
}
JS文件
mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
container: 'map',
center: [..., ...],
zoom: 10,
style: 'mapbox://styles/mapbox/streets-v11'
});
我尝试在 Bootstrap 3.4.0 模态中加载 Mapbox,就像我之前在使用 Google map 或 Bing map 时能够做到的那样,但在这两种情况下都嵌入了 iframe。因此,我期待看到 Mapbox 像 Google Maps 和 Bing Maps 一样填充整个模式。
相反,Mapbox 界面(左下方 Logo 和右下方信息按钮)正确定位在模态框内的边界处,但包含 map 的 Canvas 定位不正确。
最后,为#map CSS 属性设置预定义宽度不是解决方案。如果将宽度设置为以像素为单位的固定宽度,则它可能无法在所有窗口大小上正确显示,而添加固定百分比宽度(例如 100%)并不能解决问题。
最佳答案
Leaflet 的类似问题已经解决。 JavaScript 库 here和 here .
事实证明,缺少预定义的模态宽度使 Mapbox 没有选择,只能加载默认宽度(在这种情况下为 400 像素)。因为打开 modal 不会触发 Mapbox 可能正在监听的任何事件,例如窗口大小调整,所以 Mapbox 保持其默认宽度,无论为 modal 设置的大小一旦显示。
因此,要使 Mapbox Canvas 填满模态框的整个宽度,必须将模态框的开口(最终为其设置宽度)链接到 Mapbox 的 resize 方法。
这里感兴趣的 Bootstrap 事件是 "shown.bs.modal" ,一旦模态显示给用户并且 CSS 转换完成后触发。这保证了宽度已经设置为模态。
解决方法是在JS文件中'map'变量定义后添加如下代码:
$('#modalID').on('shown.bs.modal', function() {
map.resize();
});
确保将“modalID”更改为用于识别相应模态的相同“id”。
关于javascript - Mapbox GL JS Canvas 在 Bootstrap 模式中无法正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54681826/