javascript - Bootstrap 4 选项卡中的传单 map 未更新

Question

这是我的问题的简化示例。

我使用 Bootstrap 4 创建一个包含多个选项卡的页面，每个选项卡中包含传单 map 、图文和其他内容。

当我在选项卡之间切换时， map 将无法正确重新加载。如果我稍微调整浏览器大小， map 将正确重新加载。我可以使用 jQuery 检索选项卡 ID，但尚未找到使用它正确重新加载 map 的方法。

这是我的示例的 JSFiddle:https://jsfiddle.net/scottgeowork/85w0oj4p/5/

var mymap1 = L.map('mapid1').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 10,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap1);

var marker1 = L.marker([51.5, -0.15]).addTo(mymap1);

var mymap2 = L.map('mapid2').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 10,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(mymap2);

var marker2 = L.marker([51.5, -0.09]).addTo(mymap2);

$(document).ready(function() {
  $(".container-fluid").find(".nav-tabs").find("a").click(function() {
    tab = $(this).attr("href");
    document.getElementById("sel").innerHTML = tab;
    //$(tab).resize();
  });
});

<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

<ul class="nav nav-tabs d-flex flex-wrap" id="myTab" role="tablist">
  <li class="nav-item" id="li1">
    <a class="nav-link active" id="lia1" href="#report1" role="tab" data-toggle="tab">Tab1</a>

  </li>
  <li class="nav-item" id="li2">
    <a class="nav-link" id="lia2" href="#report2" role="tab" data-toggle="tab">Tab2</a>
  </li>
</ul>
<div class="tab-content">
  <!-----------------------map1------------------------->
  <div role="tabpanel" class="tab-pane active" id="report1">
    <p>panel 1</p>
    <div id="mapid1" style="width: 400px; height: 300px;"></div>
  </div>
  <!-----------------------map2------------------------->
  <div role="tabpanel" class="tab-pane fade" id="report2">
    <p>panel 2</p>
    <div id="mapid2" style="width: 400px; height: 300px;"></div>
  </div>
</div>

Answer 1

我认为这是你的问题:

https://stackoverflow.com/a/36257493/5003342

You can also manually trigger this update by calling map.invalidateSize() when the tab panel is displayed (e.g. add a listener on the tab button click), at least the first time the container is rendered with its correct dimensions.