carte Dépliant pas affichée correctement dans le panneau à onglets

J'essaie d'utiliser Leaflet.js pour afficher une carte dans un panneau à onglets de Twitter Bootstrap, mais se comporte d'une manière étrange:carte Dépliant pas affichée correctement dans le panneau à onglets

Lorsque je clique sur l'onglet contenant le panneau il y a une couche grise sur le dessus de la carte. Si je fais glisser et déplace la carte, je vois d'autres tuiles, mais pas les premières.

Encore plus étrange est que si je redimensionne le navigateur, tout à coup, il fonctionne parfaitement, jusqu'à ce que je recharge à nouveau, donc je suppose que c'est un problème avec le CSS, mais je ne trouve pas le problème.

De plus, placer la carte à l'extérieur du panneau à onglets fonctionne très bien.

J'ai testé dans Firefox et Chrome, et les deux ont le même problème.

J'ai créé un test jsFiddle pour le voir "live": http://jsfiddle.net/jasalguero/C7Rp8/1/

Toute aide est vraiment apprécié!

Source

2012-05-26 jasalguero

Il est un code source bidouille de déconner avec le de leaflet.js complet, mais il fonctionne (au moins en jsFiddle) http://jsfiddle.net/C7Rp8/4/

L'idée est de Google Maps, à « redimensionner » ou « redessiner » la carte lorsque son conteneur div est redimensionné.

Les changements que j'ai fait sont:

ajouter id link3 au petit onglet en HTML

<a href="#lC" data-toggle="tab" id="link3">tab3</a>

ajouter un écouteur à cet onglet à l'intérieur $(function() {

$("body").on('shown','#link3', function() { 
    L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container); 
});

La ligne de requestAniMFrame est prise à partir de trackResize dans leaflet.js

Mise à jour à partir des commentaires: Bonjour, j'ai utilisé map.invalidateSize (false); au lieu de L.Util.requestAnimFrame (... et cela semble aussi fonctionner.J'ai pensé que je le ferais remarquer.Magnifique réponse cependant - Herr Grumps

Source

2012-05-26 02:05:41

cela fonctionnait très bien donc il est un problème commun avec toutes les cartes chargées dans divs cachés – jasalguero

je sais vraiment que l'API Google Maps, donc je ne peux pas dire au sujet! d'autres implémentations de cartes, par exemple il y a aussi Openlayers/OpenStreetMap Dans ce cas j'ai eu de la chance que la tactique de redessiner ait fonctionné :) –

Ne peut pas vous remercier assez pour ce poste. Très utile! – Eamorr

Bootstrap 3 a des événements personnalisés, et donc les réponses précédentes seraient travailler avec:

$("body").on("shown.bs.tab", "#link3", function() { 
    map.invalidateSize(false); 
});

Référence: Bootstrap Tabs

Source

2014-06-17 17:05:03 youanden

carte Dépliant pas affichée correctement dans le panneau à onglets

Répondre

Questions connexes