web-dev-qa-db-ja.com

リーフレットマップがタブ付きパネル内に正しく表示されない

Leaflet.jsを使用して、Twitter Bootstrapのタブ付きパネル内に地図を表示しようとしていますが、奇妙な動作をしています：

パネルを含むタブをクリックすると、マップの上部に灰色のレイヤーがあります。マップをドラッグして移動すると、他のタイルが表示されますが、最初のタイルは表示されません。

さらに奇妙なことに、ブラウザのサイズを変更すると、再びリロードするまで突然完全に動作するため、CSSに問題があると推測されますが、問題は見つかりません。

また、マップをタブ付きパネルの外側に配置すると効果的です。

FirefoxとChromeでテストしましたが、どちらにも同じ問題があります。

Jsfiddleでテストを作成して、「ライブ」を確認します。 http://jsfiddle.net/jasalguero/C7Rp8/1/

どんな助けも本当に感謝しています！

javascriptcsstwitter-bootstrapleaflet
49
jasalguero

Leaflet.jsのソースコードをいじることによる完全なハックですが、（少なくともjsFiddleでは）動作します http://jsfiddle.net/C7Rp8/4/

アイデアはGoogle Mapsからのもので、コンテナdivのサイズが変更されたときにマップを「サイズ変更」または「再描画」します。

私が行った変更は次のとおりです。

iD _link3_をHTMLの小さなタブに追加します

_<a href="#lC" data-toggle="tab" id="link3">tab3</a>
_

$(function() {内のこのタブにリスナーを追加します

_$("body").on('shown','#link3', function() { 
  L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});
_

RequestAniMFrame行は、leaflet.jsのtrackResizeから取得されます

コメントからの更新：やあ、map.invalidateSize（false）を使用しました; L.Util.requestAnimFrame（...の代わりに、これも機能しているようです。これを指摘したいと思っただけです。素晴らしい答えです！– Herr Grumps

52
Tina CG Hoehr

ブートストラップ3にはカスタムの名前空間イベントがあるため、以前の回答は次のように機能します。

$("body").on("shown.bs.tab", "#link3", function() {
    map.invalidateSize(false);
});

参照： ブートストラップタブ

18
youanden