传单地图在 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.

这是脚本:

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


 });

非常感谢任何帮助

推荐答案

我认为发生的情况是，在创建地图时，您的 `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屋！