twitter-bootstrap 传单地图在引导程序 3.0 模式中未正确显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20400713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet map not showing properly in bootstrap 3.0 modal
提问by user2975100
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.
我有一个大问题。我想以模式打开传单地图。但地图显示不正确。瓷砖没有加载。
here is the script:
这是脚本：
<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);
});
any help much apreciated
非常感谢任何帮助
回答by Patrick D
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-canvas”元素的容器宽度/高度尚未调整为模式对话框的宽度/高度。这会导致地图大小不正确（小于）应有的大小。
You can fix this by calling map.invalidateSize(). This will work to re-adjust the width/height bounds of the L.Map's container.
您可以通过调用来解决此问题map.invalidateSize()。这将重新调整 L.Map 容器的宽度/高度边界。
You can automatically call this by hooking into the event where the Bootstrap modal becomes shown.
您可以通过挂钩到显示 Bootstrap 模式的事件来自动调用它。
$('#myModal').on('show.bs.modal', function(){
setTimeout(function() {
map.invalidateSize();
}, 10);
});
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.
将此代码插入到您的 JavaScript 中。当显示模态时，地图将使其大小无效。超时是因为模态显示和添加到 DOM 可能需要一些动画/过渡时间。
回答by Erik
You should probably avoid using setTimeout with a randomly chosen delay. A better way using the 'shown.bs.modal' event instead of 'show.bs.modal':
您可能应该避免使用随机选择延迟的 setTimeout。使用 'shown.bs.modal' 事件代替 'show.bs.modal' 的更好方法：
modal.on('shown.bs.modal', function(){
setTimeout(function() {
map.invalidateSize();
}, 1);
})
Or use underscore's defer :
或者使用下划线的 defer ：
modal.on('shown.bs.modal', function(){
_.defer(map.invalidateSize.bind(map));
})
回答by Алексей Щербаков
I use this workaround:
我使用这个解决方法：
.modal {
visibility: hidden;
display: block;
}
.modal[aria-hidden='false'] {
visibility: visible;
display: block;
}
回答by Tajuddin
This worked for me -
这对我有用-
$('#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();
})
回答by Alex Montoya
This works for me, you can read here
这对我有用，你可以在这里阅读
map.whenReady(() => {
console.log('Map ready');
setTimeout(() => {
map.invalidateSize();
}, 0);
});
回答by Matoeil
leaflet map uncorrect display on load can be solved with this :
可以通过以下方式解决传单地图在加载时显示不正确的问题：
var mapid = $(this).find('[id^=leaflet-map]').attr('id');
var map = settings.leaflet[mapid].lMap;
map.invalidateSize();
