Karte der Reaktionsbroschüre wird nicht korrekt angezeigt
Lesezeit: 6 Minuten
ThomasThiebaud
Ich versuche zu verwenden react-leaflet um eine Karte anzuzeigen. Ich verwende den Code von diese Geige was funktioniert, aber auf meinem Computer habe ich diese Ausgabe
Es gibt keinen Fehler in der Konsole und ich habe keine Ahnung mehr, wo ich suchen soll. Da die Geige funktioniert, ist es kein Fehler. Habe ich etwas verpasst ?
Michael Ramos
Sieht so aus, als hätten Sie das Leaflet-Stylesheet nicht geladen.
Von dem react-leaflet GitHub-Anleitung:
Wenn Sie mit Leaflet nicht vertraut sind, lesen Sie unbedingt die Schnellstartanleitung, bevor Sie diese Bibliothek verwenden. Sie müssen insbesondere das CSS zu Ihrer Seite hinzufügen, um die Karte richtig darzustellen, und die Höhe des Containers festlegen.
Notiz @ThomasThiebaud gibt an, dass Sie möglicherweise auch die Höhe von einrichten müssen .leaflet-container
—
Ange Loron gab auch einen korrekten, optionalen JS-Modulimport (im Vergleich zu cdn oder style link)
import 'leaflet/dist/leaflet.css';
Für was es wert ist, Die Dokumentationsseite ist schlecht gestaltet… und der Betreuer beschäftigt sich ständig mit diesem Problem in GitHub, aber aus irgendeinem Grund ist das Problem die * Schuld der Benutzer, die ständig die erforderliche Einrichtung nicht vornehmen. /s
Danke für deine Antwort. Mit dieser Zeile verliere ich alles (kein Fehler, nichts angezeigt). Ich denke, es gibt ein weiteres Problem mit der Höhe der Karte, weil ich CSS-Module verwende. Ich werde morgen nachforschen.
– Thomas Thiebaud
1. November 2016 um 20:13 Uhr
@ThomasThiebaud hört sich gut an, möchte auch sicherstellen, dass Ihre Broschürenversion mit dem von mir bereitgestellten Link übereinstimmt, und die Höhe der Kartenkomponente/des Containers festlegen.
– Michael Ramos
1. November 2016 um 22:27 Uhr
Ich habe es verstanden ! Sie müssen die Höhe von einrichten .leaflet-container Auch
– Thomas Thiebaud
2. November 2016 um 8:59 Uhr
Komisch, wie Stackoverflow-Antworten manchmal bessere Informationen liefern als offizielle Dokumente.
– Konrad
9. Juli 2020 um 10:18 Uhr
du bist eine wunderschöne Person. Dieser Kommentar hat mein Projekt gerettet
– Gibs LeFleur
18. August 2020 um 1:47 Uhr
Bikram Karki
Ich bin auch neu in der Verwendung dieser Bibliothek und fand die Dokumentation nicht klar genug. Aber hier sind einige Dinge, die ich für notwendig halte, damit dies funktioniert.
1. React-Broschürenpaket
2. Prospektpaket:
Installieren Sie es entweder mit npm
npm install leaflet und import 'leaflet/dist/leaflet.css'; in der Datei, wo Sie verwenden Map aus react-leaf.
ODER
Fügen Sie diese beiden Zeilen in die ein index.html:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
3. Fügen Sie dies zu einer App.css oder index.css hinzu und importieren Sie die Datei: (Und es ist ein Muss)
Manchmal gibt es zwei Fehler beim Laden von Bildern nach dem Hinzufügen der Broschürendatei. Um diese Fehler zu beheben, importieren Sie marker-icon.png und marker-shadow.png im Importteil und definieren Sie dann das L.Marker.prototype.options.icon:
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';
let DefaultIcon = L.icon({
...L.Icon.Default.prototype.options,
iconUrl: icon,
iconRetinaUrl: iconRetina,
shadowUrl: iconShadow
});
L.Marker.prototype.options.icon = DefaultIcon;
Wenn die Karte nicht angezeigt wird, fügen Sie die Höhe und Breite (style={{width: ‘100%’,height: ‘400px’}}) dem Map-Tag als Stil hinzu: