Pourquoi ma carte Leaflet ne s'affiche-t-elle pas lorsqu'elle est placée dans un onglet de basculement de données ?

Problèmes avec la carte Leaflet dans l'onglet bascule de données

Lors de l'utilisation d'onglets pour afficher du contenu, il est possible de rencontrer des problèmes où une carte Leaflet ne parvient pas à télécharger lorsqu'il est placé dans un onglet de bascule de données.

Cause

Le problème survient en raison de la façon dont Leaflet initialise la taille du conteneur de carte. Lorsque la carte est initialisée, Leaflet lit la taille du conteneur, qui peut par la suite devenir invalide si le conteneur est masqué ou si ses dimensions sont modifiées.

Solution

Pour résoudre ce problème problème, vous devez mettre à jour manuellement la taille du conteneur après l'affichage de l'onglet. Ceci peut être réalisé en utilisant la méthode map.invalidateSize().

Implémentation

Dans votre code JavaScript, ajoutez un écouteur à l'événement de clic du bouton d'onglet pour déclencher la carte update :

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

Vous pouvez également utiliser des méthodes spécifiques au framework pour déclencher la mise à jour de la carte en fonction de la visibilité de l'onglet. Par exemple, dans Bootstrap, vous pouvez utiliser l'événement montré.bs.tab :

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

En mettant à jour la taille du conteneur de carte après l'affichage de l'onglet, vous pouvez vous assurer que la carte Leaflet se télécharge et s'affiche correctement dans le onglet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!