小册子地图在Bootstrap 3.0模态中无法正确显示 [英] Leaflet map not showing properly in bootstrap 3.0 modal
问题描述
我有一个大问题.我想以模式形式打开传单地图. 但是地图显示不正确.瓷砖没有加载.
i have a big problem. i want to open a leaflet map in a modal. but the map is not showing properly. the tiles are not loading.
这是脚本:
<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);
});
非常感谢的任何帮助
推荐答案
我认为正在发生的事情是,在创建地图时,"map-canvas"元素的容器宽度/高度尚未调整为模态对话框的宽度/高度.这会导致地图大小不正确(小于实际大小).
I think what is happening is that, when the map is created, the container width/height for your `map-canvas' element has not yet been adjusted to the width/height of the modal dialog. This causes the map size to be incorrect (smaller) than what it should be.
您可以通过调用map.invalidateSize()
来解决此问题.这将有助于重新调整L.Map容器的宽度/高度范围.
You can fix this by calling map.invalidateSize()
. This will work to re-adjust the width/height bounds of the L.Map's container.
您可以通过挂接到显示Bootstrap模式的事件来自动调用它.
You can automatically call this by hooking into the event where the Bootstrap modal becomes shown.
$('#myModal').on('show.bs.modal', function(){
setTimeout(function() {
map.invalidateSize();
}, 10);
});
将此代码插入到您的JavaScript中.显示模态时,贴图将使其大小无效.之所以超时,是因为可能会有一些动画/转换时间来显示模态并将其添加到DOM.
Insert this code into your JavaScript. When the modal is shown, the map will then invalidate its size. The timeout is because there may be some animation/transition time for the modal to display and be added to the DOM.
这篇关于小册子地图在Bootstrap 3.0模态中无法正确显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!