데이터 토글 탭 안에 전단지 맵을 배치하면 왜 표시되지 않습니까?

Problems with Leaflet Map in Data-Toggle Tab

When using tabs to display content, it is possible to encounter issues where a Leaflet map fails to download when placed within a data-toggle tab.

Cause

The issue arises due to the way Leaflet initializes the map container size. When the map is initialized, Leaflet reads the container size, which can later become invalid if the container is hidden or its dimensions are changed.

Solution

To resolve this issue, you need to manually update the container size after the tab is displayed. This can be achieved using the map.invalidateSize() method.

Implementation

In your JavaScript code, add a listener to the tab button's click event to trigger the map 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();
    });
});

Alternatively, you can use framework-specific methods to trigger the map update based on the tab's visibility. For instance, in Bootstrap you can use the shown.bs.tab event:

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

By updating the map container size after the tab is displayed, you can ensure that the Leaflet map downloads and renders correctly within the tab.

위 내용은 데이터 토글 탭 안에 전단지 맵을 배치하면 왜 표시되지 않습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!