リーフレット マップがデータ切り替えタブ構造内でロードできないのはなぜですか?

リーフレット マップの初期化を妨げるデータ切り替えタブ

リーフレット マップは、Web ページ上にインタラクティブなマップを表示できる機能で知られています。ただし、データ切り替えタブ構造内でリーフレット マップを使用すると問題が発生し、マップが正しくロードされなくなる可能性があります。

問題の理解

問題これは、Leaflet がマップを初期化する方法に由来します。マップの作成時にコンテナーのサイズが計算されます。コンテナが初期化時に非表示になっている場合 (データ切り替えタブの場合は非表示タブ内など)、Leaflet はそのサイズを正確に判断できない可能性があります。これにより、タイルが正しくダウンロードされず、マップのレンダリングが不完全になる可能性があります。

解決策: コンテナ サイズを手動で更新する

この問題に対処するには、次を使用してコンテナ サイズの更新を手動でトリガーできます。 map.invalidateSize() メソッド。これにより、Leaflet はコンテナ サイズを再計算し、タイルを正しくダウンロードし、期待どおりにマップを表示できるようになります。

jQuery を使用してこのソリューションを実装する方法は次のとおりです。

$(document).on('shown.bs.tab', '#carte', function () {
  map.invalidateSize();
});

このコードでは、 show.bs.tab イベント リスナーは、「carte」タブが表示されたときを検出するために使用されます。これが発生すると、map.invalidateSize() 関数がトリガーされ、コンテナーのサイズが更新され、マップが適切に表示されるようになります。

追加メモ

• map.invalidateSize() メソッドは、コンテナが初めて正しいサイズで表示されるときに 1 回だけ呼び出す必要があります。
• このソリューションは、マップが非表示または動的に初期化されるあらゆる状況に適用できます。コンテナを変更します。

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