Twitter bootstrap 3 模态中的传单和地图框显示不正确

存在使用传单的Mapbox在模式中无法正确显示的问题

地图和标记位于左上角，其余平铺为空白

我已经尝试了代码直接在一个页面，而不是一个模式，它的作品

#mapid{高度：300px；}
var mymap=L.map（'mapid'）.setView（[，]，13）；
//var mymap=L.Map（'mapid'，{center:new L.LatLng（，]），zoom:15，layers:[nexrad]，zoomControl:true}）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？访问_令牌='{
属性：'©；，©；'，
maxZoom:20，
id:“地图盒。街道”，
accessToken:“”
}).addTo（mymap）；
var marker=L.marker（[，]）.addTo（mymap）；

如中所述，在调整浏览器窗口大小时让地图工作只是问题的一个症状。传单将侦听浏览器窗口调整大小事件，并在事件发生时再次读取地图视口尺寸，以便正确显示平铺并使视图居中

在引擎盖下，传单只是呼吁调整大小事件

因此，适合您的解决方案不是调整浏览器窗口的大小，而是调用

map.invalidateSize（）

并在加载贴图后，但在打开模式后，而不是在加载贴图后执行，以便贴图视口现在具有其最终尺寸

由于您在问题中添加了Bootstrap标记，我猜您的模式是使用Bootstrap构建的。在这种情况下，您可以收听事件：

var-map=L.map（'map'）.setView（[48.86,2.35]，11）；
L.标记（[48.86,2.35]）。添加到（地图）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
//注释掉下面的代码以查看差异。
$（'#myModal'）.on（'show.bs.modal'，function（）{
map.invalidateSize（）；
});

启动包含地图容器的演示模式。
&时代；
情态标题
接近
问题似乎与bootstap model有关

需要添加map.invalidateSize（）；但根据ghybs的建议，在“show.bs.modal”范围内

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

注意map.invalidateSize（）中的“map”；需要替换为“var map=L.map（）”中指定的变量。我在这篇文章中的原始代码是：

var mymap = L.map('mapid').setView([<?= $return['latitude']; ?>, <?= $return['longitude']; ?>], 13);

这似乎只是一个桌面浏览器wifi问题。在手机和LTE上似乎还可以，但在wifi上不行……如果调整浏览器窗口的大小，它可能会自动更正。想知道是否有可能在地图加载后自动调整浏览器窗口的大小，而不是模式窗口的大小，先调整-1px，然后调整+1px。地图在模态窗口中…ghybs-认为“show.bs.modal”起作用了！将在不同的设备上运行一些测试以确保。谢谢
$('#modalID').on('shown.bs.modal', function() {
  mymap.invalidateSize();
});