データ切り替えタブ内に配置したリーフレット マップが表示されないのはなぜですか?

データ切り替えタブのリーフレット マップに関する問題

タブを使用してコンテンツを表示する場合、リーフレット マップが表示されない問題が発生する可能性があります。データトグル内に配置するとダウンロードに失敗するtab.

原因

この問題は、Leaflet がマップ コンテナー サイズを初期化する方法が原因で発生します。マップが初期化されるときに、Leaflet はコンテナのサイズを読み取ります。これは、後でコンテナが非表示になったり、コンテナの寸法が変更されたりすると無効になる可能性があります。

解決策

これを解決するにはこの問題が発生した場合は、タブが表示された後にコンテナのサイズを手動で更新する必要があります。これは、map.invalidateSize() メソッドを使用して実現できます。

実装

JavaScript コードで、タブ ボタンのクリック イベントにリスナーを追加して、マップをトリガーします。 update:

$(document).ready(function () {
    var map = new L.Map('carteBenef');
    // ... (rest of your code)
    
    // Add listener to tab button click
    $('#carteTabButton').on('click', function () {
        map.invalidateSize();
    });
});

または、フレームワーク固有のメソッドを使用して、ベースのマップ更新をトリガーすることもできます。タブの可視性について。たとえば、ブートストラップでは、次の show.bs.tab イベントを使用できます。

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

タブが表示された後にマップ コンテナーのサイズを更新することで、リーフレット マップが確実にダウンロードされ、正しくレンダリングされるようにすることができます。タブ。

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