Карта листовка не отображается правильно в bootstrap 3.0 modal

У меня большая проблема. Я хочу открыть карту буклета в модальной форме. но карта не отображается должным образом. плитки не загружаются.

здесь находится script:

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="#" onclick="location.href='http://openstreetmap.org'; return false;">OpenStreetMap</a>   contributors, Imagery © <a href="#" onclick="location.href='http://cloudmade.com'; return false;">CloudMade</a>',
 maxZoom: 18
 });
 map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13);


 });

любая помощь, которую многие из вас оценили

Ответ 1

Я думаю, что происходит то, что при создании карты ширина/высота контейнера для вашего элемента "map-canvas" еще не была изменена до ширины/высоты модального диалога. Это приводит к тому, что размер карты будет неправильным (меньше), чем то, что должно быть.

Вы можете исправить это, вызвав map.invalidateSize(). Это будет работать, чтобы изменить настройки ширины/высоты контейнера L.Map.

Вы можете автоматически вызвать это, подключившись к событию, где будет показан способ загрузки Bootstrap.

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

Вставьте этот код в свой JavaScript. Когда модальность будет показана, карта затем аннулирует ее размер. Тайм-аут состоит в том, что может быть некоторое время анимации/перехода для модального отображения и добавления в DOM.

Ответ 2

Вероятно, вам следует избегать использования setTimeout со случайно выбранной задержкой. Лучше использовать событие show.bs.modal вместо 'show.bs.modal':

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

Или используйте подчеркивание defercore:

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

Ответ 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();
})