Rumah > hujung hadapan web > tutorial js > Mengapakah peta Risalah saya tidak dipaparkan apabila diletakkan di dalam tab togol data?

Mengapakah peta Risalah saya tidak dipaparkan apabila diletakkan di dalam tab togol data?

DDD
Lepaskan: 2024-11-15 02:48:02
asal
1057 orang telah melayarinya

Why does my Leaflet map not display when placed inside a data-toggle tab?

Masalah dengan Peta Risalah dalam Tab Togol Data

Apabila menggunakan tab untuk memaparkan kandungan, adalah mungkin untuk menghadapi isu di mana peta Risalah gagal dimuat turun apabila diletakkan dalam tab togol data.

Punca

Isu ini timbul disebabkan oleh cara Risalah memulakan saiz bekas peta. Apabila peta dimulakan, Risalah membaca saiz bekas, yang kemudiannya boleh menjadi tidak sah jika bekas itu disembunyikan atau dimensinya ditukar.

Penyelesaian

Untuk menyelesaikan masalah ini isu, anda perlu mengemas kini saiz bekas secara manual selepas tab dipaparkan. Ini boleh dicapai menggunakan kaedah map.invalidateSize().

Pelaksanaan

Dalam kod JavaScript anda, tambahkan pendengar pada acara klik butang tab untuk mencetuskan peta kemas kini:

$(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();
    });
});
Salin selepas log masuk

Sebagai alternatif, anda boleh menggunakan kaedah khusus rangka kerja untuk mencetuskan kemas kini peta berdasarkan keterlihatan tab. Sebagai contoh, dalam Bootstrap anda boleh menggunakan acara shown.bs.tab:

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

Dengan mengemas kini saiz bekas peta selepas tab dipaparkan, anda boleh memastikan bahawa peta Risalah memuat turun dan memaparkan dengan betul dalam tab.

Atas ialah kandungan terperinci Mengapakah peta Risalah saya tidak dipaparkan apabila diletakkan di dalam tab togol data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan