リーフレット マップがデータ切り替えタブに読み込めないのはなぜですか?

データ切り替えタブでリーフレット マップの読み込みに失敗する

問題

タブ付きインターフェイスで、データ切り替えタブ内のリーフレット マップが失敗するロードする

コード

ナビゲーションバー:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>

コンテンツ ディビジョン:

<div class="tab-content">
    <div>

リーフレットスクリプト:

var map = new L.Map('carteBenef');
// Configure the map here

原因

この問題は、Leaflet が初期化時にマップ コンテナーのサイズを読み取るために発生します。マップが非表示のタブに配置されている場合、コンテナ サイズがまだ有効ではないため、タイルの読み込みが不完全になります。

解決策

これを解決するには、次のときにマップ サイズの更新を手動でトリガーできます。マップを含むタブが表示されます。これは、タブのアクティブ化イベントで map.invalidateSize() を呼び出すことで実現できます。

例:

$('a[href="#carte"]').on('shown.bs.tab', function () {
    map.invalidateSize(true);
});

これにより、Leaflet はマップ コンテナのサイズを再評価し、マップ コンテナーのサイズを正しくロードします。タイル。

以上がリーフレット マップがデータ切り替えタブに読み込めないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。