51

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

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

さらに奇妙なことに、ブラウザのサイズを変更すると、再度リロードするまで突然完全に機能するため、cssに問題があると思いますが、問題を見つけることができません。

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

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

jsfiddleでテストを作成して、「ライブ」であることを確認しました：http: //jsfiddle.net/jasalguero/C7Rp8/1/

どんな助けでも本当にありがたいです！

4

2 に答える 2

52

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

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

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

link3HTML の小さなタブにid を追加する

<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

于 2012-05-26T02:05:41.903 に答える
20

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

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

リファレンス:ブートストラップ タブ

于 2014-06-17T17:05:03.270 に答える