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

Question

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

здесь сценарий:

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); 


}); 

любая помощь очень apreciated

Answer 1

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

Вы можете исправить это, позвонив по телефону map.invalidateSize(). Это поможет отрегулировать границы ширины и высоты контейнера L.Map.

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

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

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

Answer 2

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

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

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

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

Answer 3

Я использую этот обходной путь:

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

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

Answer 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(); 
})