Pourquoi ma carte de dépliant ne parvient-elle pas à se charger dans un onglet de basculement de données ?

La carte de dépliants ne se charge pas dans l'onglet de basculement de données

Problème

Dans une interface à onglets, une carte de dépliant dans un onglet de basculement de données échoue charger correctement.

Code

Barre de navigation :

<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 de contenu :

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

Dépliant Script :

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

Cause

Le problème survient car Leaflet lit la taille du conteneur de carte lors de l'initialisation. Lorsque la carte est placée dans un onglet masqué, la taille du conteneur n'est pas encore valide, ce qui entraîne un chargement incomplet des tuiles.

Solution

Pour résoudre ce problème, vous pouvez déclencher manuellement une mise à jour de la taille de la carte lorsque l'onglet contenant la carte s'affiche. Ceci peut être réalisé en appelant map.invalidateSize() sur l'événement d'activation de l'onglet.

Exemple :

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

Cela forcera Leaflet à réévaluer la taille du conteneur de carte et à charger correctement le tuiles.

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!