web-dev-qa-db-ja.com

bootstrap 3.0モーダルでリーフレットマップが正しく表示されない

私は大きな問題を抱えています。モーダルでリーフレットマップを開きたい。しかし、地図は正しく表示されていません。タイルが読み込まれていません。

スクリプトは次のとおりです。

http://bootply.com/987

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


 });

どんな助けでも大いに感謝します

twitter-bootstrapmodal-dialogleaflet
14
user2975100

マップが作成されたとき、 `map-canvas '要素のコンテナの幅/高さがモーダルダイアログの幅/高さにまだ調整されていないことが起こっていると思います。これにより、マップサイズが本来よりも不正確（小さく）になります。

これは、map.invalidateSize()を呼び出すことで修正できます。これは、L.Mapのコンテナの幅/高さの境界を再調整するために機能します。

Bootstrapモーダルが表示されるイベントにフックすることで、これを自動的に呼び出すことができます。

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

このコードをJavaScriptに挿入します。モーダルが表示されると、マップはそのサイズを無効にします。タイムアウトは、モーダルが表示されてDOMに追加されるまでにアニメーション/遷移時間が発生する可能性があるためです。

41
Patrick D

ランダムに選択された遅延でsetTimeoutを使用することはおそらく避けてください。 'show.bs.modal'の代わりに 'shown.bs.modal'イベントを使用するより良い方法：

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

または、アンダースコアの延期を使用します。

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

私はこの回避策を使用します：

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

.modal[aria-hidden='false'] {
  visibility: visible;
  display: block;
}
7
Алексей Щербаков

ロード時のリーフレットマップの誤った表示は、これで解決できます：

  var mapid = $(this).find('[id^=leaflet-map]').attr('id');
  var map = settings.leaflet[mapid].lMap;
  map.invalidateSize();
0
Matoeil

これは私のために働いた-

 $('#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();
})
0
Tajuddin

これは私のために働きます、 あなたはここで読むことができます

map.whenReady(() => {
    console.log('Map ready');
    setTimeout(() => {
        map.invalidateSize();
    }, 0);
});
0
Alex Montoya