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

데이터 전환 탭에서 전단지 맵을 로드하지 못함

문제

탭 인터페이스에서 데이터 전환 탭 내의 전단지 맵을 로드하지 못함 로드하다 정확합니다.

코드

Navbar:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>

Content Div:

<div class="tab-content">
    <div>

전단지 스크립트:

var map = new L.Map('carteBenef');
// Configure the map here

원인

Leaflet이 초기화 시 지도 컨테이너 크기를 읽기 때문에 문제가 발생합니다. 지도가 숨겨진 탭에 배치되면 컨테이너 크기가 아직 유효하지 않아 타일 로드가 불완전해집니다.

해결 방법

이 문제를 해결하려면 다음과 같은 경우 지도 크기 업데이트를 수동으로 트리거할 수 있습니다. 지도가 포함된 탭이 표시됩니다. 이는 탭 활성화 이벤트에서 map.invalidateSize()를 호출하여 달성할 수 있습니다.

예:

$('a[href="#carte"]').on('shown.bs.tab', function () {
    map.invalidateSize(true);
});

이렇게 하면 Leaflet이 지도 컨테이너 크기를 다시 평가하고 타일.

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