데이터 토글 탭 구조 내에서 내 전단지 맵을 로드하지 못하는 이유는 무엇입니까?

리플릿 지도 초기화를 방해하는 데이터 전환 탭

리플렛 지도는 웹 페이지에 대화형 지도를 표시하는 기능으로 잘 알려져 있습니다. 그러나 데이터 전환 탭 구조 내에서 Leaflet 맵을 사용할 때 문제가 발생할 수 있으며, 이로 인해 맵이 올바르게 로드되지 않습니다.

문제 이해

문제 Leaflet이 맵을 초기화하는 방식에서 비롯됩니다. 지도 생성 중에 컨테이너 크기를 계산합니다. 초기화 시 컨테이너가 숨겨진 경우(예: 데이터 전환 탭의 경우 숨겨진 탭 내에서) Leaflet은 해당 크기를 정확하게 결정하지 못할 수 있습니다. 이로 인해 잘못된 타일 다운로드 및 불완전한 지도 렌더링이 발생할 수 있습니다.

해결책: 컨테이너 크기 수동 업데이트

이 문제를 해결하려면 다음을 사용하여 컨테이너 크기 업데이트를 수동으로 트리거할 수 있습니다. map.invalidateSize() 메서드. 이렇게 하면 Leaflet이 컨테이너 크기를 다시 계산하여 타일을 올바르게 다운로드하고 예상대로 지도를 표시할 수 있습니다.

jQuery를 사용하여 이 솔루션을 구현하는 방법은 다음과 같습니다.

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

이 코드에서, visible.bs.tab 이벤트 리스너는 'carte' 탭이 표시되는 시기를 감지하는 데 사용됩니다. 이 경우 map.invalidateSize() 함수가 트리거되어 컨테이너 크기가 업데이트되고 지도가 제대로 표시되는지 확인합니다.

추가 참고 사항

• map.invalidateSize() 메서드는 컨테이너가 처음으로 올바른 이름으로 표시될 때 한 번만 호출해야 합니다. 차원.
• 이 솔루션은 지도가 숨겨진 컨테이너 또는 동적으로 변경되는 컨테이너 내에서 초기화되는 모든 상황에 적용 가능합니다.

위 내용은 데이터 토글 탭 구조 내에서 내 전단지 맵을 로드하지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!