Mengapa Peta Risalah Saya Gagal Dimuatkan dalam Tab Togol Data?

Peta Risalah Gagal Dimuatkan dalam Tab Togol Data

Isu

Dalam antara muka tab, peta Risalah dalam tab togol data gagal untuk memuatkan dengan betul.

Kod

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>

Div Kandungan:

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

Risalah Skrip:

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

Punca

Isu timbul kerana Risalah membaca saiz bekas peta pada permulaan. Apabila peta diletakkan dalam tab tersembunyi, saiz bekas masih belum sah, mengakibatkan pemuatan jubin tidak lengkap.

Penyelesaian

Untuk menyelesaikan masalah ini, anda boleh mencetuskan kemas kini saiz peta secara manual apabila tab yang mengandungi peta dipaparkan. Ini boleh dicapai dengan memanggil map.invalidateSize() pada acara pengaktifan tab.

Contoh:

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

Ini akan memaksa Risalah untuk menilai semula saiz bekas peta dan memuatkan dengan betul jubin.

Atas ialah kandungan terperinci Mengapa Peta Risalah Saya Gagal Dimuatkan dalam Tab Togol Data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!