Maison >interface Web >js tutoriel >Pourquoi ne puis-je pas télécharger ma carte de dépliant lorsqu'elle se trouve dans un onglet bascule de données ?

Pourquoi ne puis-je pas télécharger ma carte de dépliant lorsqu'elle se trouve dans un onglet bascule de données ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-15 04:38:02607parcourir

Why Can't I Download My Leaflet Map When It's Inside a Data-Toggle Tab?

L'onglet de basculement de données empêche le téléchargement de la carte de dépliant

Cette question se pose lorsqu'une carte de dépliant dans un onglet de basculement de données ne parvient pas à se télécharger correctement. La carte fonctionnait auparavant lorsqu'elle était affichée en dehors de l'onglet.

Cause

Le dépliant initialise la carte lors de la lecture de la taille du conteneur. Lorsque le conteneur est initialement masqué ou que ses dimensions sont modifiées, Leaflet n'est pas au courant des modifications, ce qui entraîne des téléchargements de vignettes incorrects. Ce problème est courant lors de l'utilisation d'onglets ou de panneaux modaux dans des frameworks tels que Bootstrap.

Solution

Déclenchez une mise à jour de la taille du conteneur en appelant map.invalidateSize() lorsque le panneau à onglets s'affiche. Cela peut être fait via un écouteur sur le bouton d'onglet, cliquez sur.

Tab Button Click Listener Implementation

Pour l'implémentation de l'écouteur de clic sur le bouton d'onglet, reportez-vous à Stack Documentation spécifique au débordement ou au framework.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn