Karta Przełączanie danych nie pobiera mapy ulotek

Question

Używam kart do wyświetlania przejrzystej treści, ale jedna z nich przestała się ładować, ponieważ znajduje się w zakładce przełączania danych. To jest mapa ulotek. Oto kod: Kod

---

pasek nawigacyjny:

<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 class="tab-content"> 
    <div id="home" class="tab-pane fade in active">Lorem ipsum</div> 
    <div id="carte" class="tab-pane fade"> **//see script below\\** </div> 
</div> 

---

Scenariusz:

<div id="carteBenef"></div> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var map = new L.Map('carteBenef'); 
       var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', 
        subDomains = ['otile1', 'otile2', 'otile3', 'otile4'], 
        cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>'; 
       var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains}); 
       var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>) 
       map.addLayer(cloudmade).setView(iades, 15); 
       var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>); 
       var benef = new L.Marker(benefLocation); 
       map.addLayer(benef); 
       benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup(); 
      }); 
     </script> 

Mapa została pojawiające się na długo przed I umieścić go na karcie, czy kogoś masz pomysł, dlaczego teraz nie działa? Dziękujemy =)

Answer 1

Witamy w SO!

Jeśli Twój Leaflet mapnagle działa poprawnie po zmianie rozmiaru okna przeglądarki, a następnie wystąpić klasyczny „rozmiar map pojemnik nie ważne na mapie inicjalizacji”: w celu poprawnego działania Ulotka odczytuje wielkość map kontenera podczas inicjalizacji mapa (L.map("mapContainerId")).

Jeśli twoja aplikacja ukryje ten kontener (zwykle przez CSS display: none; lub jakąś kartę szkieletową/modal/cokolwiek ...) lub później zmienia swoje wymiary, ulotka nie będzie świadoma nowego rozmiaru. Dlatego nie będzie renderowany poprawnie. Zazwyczaj pobiera kafelki tylko dla ułamka kontenera, który według niego jest wyświetlany. Może to być pojedynczy kafelek w lewym górnym rogu w przypadku kontenera, który był całkowicie ukryty w czasie inicjowania mapy.

Ten błąd pojawia się często podczas umieszczania kontenera mapy w panelu "tabulacji" lub "modalu", prawdopodobnie przy użyciu popularnych frameworków (Bootstrap, Angular, Ionic itp.).

Ulotka słucha zdarzenia zmiany rozmiaru okna przeglądarki i ponownie odczytuje rozmiar kontenera, gdy się to stanie. To wyjaśnia, dlaczego mapa nagle działa na zmianę rozmiarów okna.

Możesz także ręcznie włączyć tę aktualizację, wywołując map.invalidateSize(), gdy wyświetlany jest panel z zakładkami (np. Dodaj detektor na przycisku z zakładką), przynajmniej po pierwszym renderowaniu kontenera z jego prawidłowymi wymiarami.

Jeśli chodzi o implementację detektora z przyciskiem z zakładką przycisku, należy wykonać nowe wyszukiwanie w SO na ten temat: w przypadku większości najpopularniejszych frameworków należy dysponować wystarczającymi zasobami.

Answer 2

Po pierwsze, dziękuję @ghybs za dobre wyjaśnienie, dlaczego mapy Leaflet nie są prawidłowo wyświetlane w tych przypadkach.

Dla tych, którzy bezskutecznie próbował odebrać @ ghybs męska, należy spróbować zmienić rozmiar przeglądarki zamiast wywoływania metody obiektu mapy:

window.dispatchEvent(new Event('resize')); 

mocujące pracował dla mnie, a to powinno działać w każdym przypadki.