Warum kann meine Prospektkarte nicht in eine Daten-Umschaltregisterkarte geladen werden?

Broschürenkarte kann nicht in die Registerkarte „Daten umschalten“ geladen werden

Problem

In einer Oberfläche mit Registerkarten schlägt eine Broschürenkarte innerhalb einer Registerkarte „Daten umschalten“ fehl laden richtig.

Code

Navigationsleiste:

<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>

Content Div:

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

Broschüre Skript:

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

Ursache

Das Problem tritt auf, weil Leaflet die Kartencontainergröße bei der Initialisierung liest. Wenn die Karte in einem ausgeblendeten Tab platziert wird, ist die Containergröße noch nicht gültig, was dazu führt, dass die Kacheln nicht vollständig geladen werden.

Lösung

Um dieses Problem zu beheben, können Sie manuell eine Aktualisierung der Kartengröße auslösen, wenn Die Registerkarte mit der Karte wird angezeigt. Dies kann erreicht werden, indem man „map.invalidateSize()“ beim Tab-Aktivierungsereignis aufruft.

Beispiel:

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

Dadurch wird Leaflet gezwungen, die Größe des Kartencontainers neu zu bewerten und die korrekt zu laden Fliesen.

Das obige ist der detaillierte Inhalt vonWarum kann meine Prospektkarte nicht in eine Daten-Umschaltregisterkarte geladen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!