传单地图在 bootstrap 3.0 模式中未正确显示答案

【问题标题】：Leaflet map not showing properly in bootstrap 3.0 modal传单地图在 bootstrap 3.0 模式中未正确显示
【发布时间】：2013-12-22 10:27:24
【问题描述】：

我有一个大问题。我想以模式打开传单地图。但地图显示不正确。瓷砖没有加载。

这是脚本：

http://bootply.com/98730

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Open Map</a>

<div id="myModal" class="modal">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Map</h4>
    </div>
    <div class="modal-body">
      <div class="modal-body" id="map-canvas"></div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
    </div>
  </div>
</div>

$.getScript('http://cdn.leafletjs.com/leaflet-0.7/leaflet.js',function(){

 /* map settings */
 var map = new L.Map('map-canvas');
 var cloudmade = new    L.TileLayer('http://{s}.tile.cloudmade.com/f1376bb0c116495e8cb9121360802fb0/997/256/{z}/{x} /{y}.png', {
 attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>   contributors, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
 maxZoom: 18
 });
 map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13);


 });

非常感谢任何帮助

【问题讨论】：

标签： twitter-bootstrap modal-dialog leaflet

【解决方案1】：

我认为发生的情况是，在创建地图时，您的“map-canvas”元素的容器宽度/高度尚未调整为模式对话框的宽度/高度。这会导致地图大小不正确（小于）应有的大小。

您可以通过调用 map.invalidateSize() 来解决此问题。这将用于重新调整 L.Map 容器的宽度/高度边界。

您可以通过挂钩到显示 Bootstrap 模式的事件来自动调用它。

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

将此代码插入您的 JavaScript。当模态显示时，地图将使其大小无效。超时是因为模态框可能需要一些动画/过渡时间才能显示并添加到 DOM。

【讨论】：

也许你也可以帮我解决这个问题：stackoverflow.com/questions/20404174/… :)
在某些情况下，考虑到模态完全加载所需的时间，10 毫秒可能是非常短的时间。增加调用 invalidateSize() 之前的时间和/或在模式中放置一个刷新按钮以在单击该函数时调用该函数是个好主意。
一个“刷新”按钮肯定会提供一个gaurentee。
我的问题与模态无关，但仍然缺失。我不得不为样式添加一个维度。我选择跟高。 <div id='map-canvas' style='height:360px;'></div>

【解决方案2】：

您应该避免使用带有随机选择延迟的 setTimeout。使用 'shown.bs.modal' 事件而不是 'show.bs.modal' 的更好方法：

modal.on('shown.bs.modal', function(){
    setTimeout(function() {
        map.invalidateSize();
   }, 1);
})

或者使用下划线的defer：

modal.on('shown.bs.modal', function(){
    _.defer(map.invalidateSize.bind(map));
})

【讨论】：

^ 这应该是公认的答案。此外，因为一旦模式可见就会触发“显示”事件，您不再需要排队 invalidateSize() 方法，对吗？您可以只使用 modal.on('shown.bs.modal', function () { map.invalidateSize(); }); （来源：getbootstrap.com/javascript/#modals-events）
是的，这样更好。

【解决方案3】：

我使用这个解决方法：

.modal {
  visibility: hidden;
  display: block;
}

.modal[aria-hidden='false'] {
  visibility: visible;
  display: block;
}

【讨论】：

【解决方案4】：

这对我有用 -

 $('#gmap').on('shown.bs.tab', function (e) {
    //call the clear map event first
    clearMap();
    //resize the map - this is the important part for you
   map.invalidateSize(true);
   //load the map once all layers cleared
   loadMap();
})

【讨论】：

【解决方案5】：

这对我有用，you can read here

map.whenReady(() => {
    console.log('Map ready');
    setTimeout(() => {
        map.invalidateSize();
    }, 0);
});

【讨论】：

【解决方案6】：

传单地图加载时显示不正确可以通过以下方式解决：

  var mapid = $(this).find('[id^=leaflet-map]').attr('id');
  var map = settings.leaflet[mapid].lMap;
  map.invalidateSize();

【讨论】：

【解决方案7】：

我是如何解决这个问题的：在主窗口中初始化地图。然后将地图移动到打开的模式。

【讨论】：

【解决方案8】：

对于 vue.js 和 nuxt.js 开发者，可能是因为使用了 v-show 或 v-if 但别担心，你唯一需要做的就是像这样使用仅限客户端的标签：

<client-only>
<div v-show="someVariable" id="vShowOrVIfExample">
<div id="map-wrap" style="height: 100vh">
   <l-map :zoom=13 :center="[55.9464418,8.1277591]">
     <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
     <l-marker :lat-lng="[55.9464418,8.1277591]"></l-marker>
   </l-map>
 </div>
</div>
</client-only>

【讨论】：