相关疑难解决方法(0)

我正在使用选项卡显示清晰的内容,但其中一个已停止下载,因为它位于数据切换选项卡中.这是一张传单地图.这是代码:

导航条代码:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">Lorem ipsum</div>
    <div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>

脚本:

<div id="carteBenef"></div>
      <script type="text/javascript">
          $(document).ready(function () {
              var map = new L.Map('carteBenef');
              var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
                     subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
                     cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
              var cloudmade = new L.TileLayer(cloudmadeUrl, …

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

结果是加载默认宽度为 400px 的 Mapbox 画布，这可能与模态宽度不同并造成糟糕的用户体验。

此外，如果打开模式，然后调整浏览器窗口的大小，地图会自动按预期适合整个水平空间，这似乎是对调整大小事件的 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 地图或 Bing 地图时所做的那样，但在这两种情况下都嵌入在 iframe 中。因此，我期待看到 Mapbox 能够像 Google 地图和 Bing 地图一样填充整个模式。

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

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