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

데이터 전환 탭의 전단지 맵 문제

탭을 사용하여 콘텐츠를 표시할 때 전단지 맵에 문제가 발생할 수 있습니다. 데이터 토글 탭에 배치하면 다운로드에 실패합니다.

원인

이 문제는 Leaflet이 지도 컨테이너 크기를 초기화하는 방식으로 인해 발생합니다. 맵이 초기화되면 Leaflet은 컨테이너 크기를 읽는데, 컨테이너가 숨겨져 있거나 크기가 변경되면 나중에 유효하지 않게 될 수 있습니다.

해결 방법

이 문제를 해결하려면 문제가 발생하면 탭이 표시된 후 컨테이너 크기를 수동으로 업데이트해야 합니다. 이는 map.invalidateSize() 메소드를 사용하여 달성할 수 있습니다.

구현

JavaScript 코드에서 탭 버튼의 클릭 이벤트에 리스너를 추가하여 지도를 트리거하세요. 업데이트:

$(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();
    });
});

또는 프레임워크별 방법을 사용하여 탭의 가시성에 따라 지도 업데이트를 트리거할 수 있습니다. 예를 들어, Bootstrap에서는 visible.bs.tab 이벤트를 사용할 수 있습니다.

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

탭이 표시된 후 지도 컨테이너 크기를 업데이트하면 Leaflet 지도가 다음 내에서 올바르게 다운로드되고 렌더링되는지 확인할 수 있습니다. 탭.

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