Karte der Reaktionsbroschüre wird nicht korrekt angezeigt

Lesezeit: 6 Minuten

Benutzeravatar von ThomasThiebaud
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

Geben Sie hier die Bildbeschreibung ein

Hier ist mein Code:

DeviceMap.js

import React from 'react'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

export class DeviceMap extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}

export default DeviceMap

DeviceTabs.js

export class DeviceTabs extends React.Component {
  state = {
    index: 0
  };

  handleTabChange = (index) => {
    this.setState({ index })
  };

  render () {
    return (
      <Tabs index={this.state.index} onChange={this.handleTabChange}>
        <Tab label="Values">
          <DeviceTable {...this.props} />
        </Tab>
        <Tab label="Map">
          <div className={style.leaflet}>
            <DeviceMap />
          </div>
        </Tab>
      </Tabs>
    )
  }
}

style.scss

.leaflet {
  height: 300px;
  width: 100%;
}

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 ?

Benutzeravatar von Michael Ramos
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.

http://leafletjs.com/examples/quick-start/

Hier ist, was Sie brauchen:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

Aktualisieren

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


Benutzeravatar von Bikram Karki
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)

.leaflet-container {
  width: 100wh; 
  height: 100vh;
}

// ODER Stil direkt zum Kartencontainer hinzufügen

<Map
   center={position}
   zoom={1}
   style={{ height: '100vh', width: '100wh' }}
   >
   <TileLayer .... />
</Map>

  • Danke, muss nur den Buchstaben bei der Breite style={{ height: ‘100vh’, width: ‘100wh’ }} korrigieren

    – Anfänger

    6. Juni 2020 um 21:55 Uhr

  • Danke, für mich war das Wichtige hinzuzufügen import 'leaflet/dist/leaflet.css';

    – Mrmld Sky

    16. Juli um 9:53

  • Importiere ‘Leaflet/dist/Leaflet.css’; in der Datei, in der Sie Map von React-Leaf verwenden. hat bei mir funktioniert

    – ng-jemand

    13. August um 4:37 Uhr

Für den Fall, dass jemand auf dasselbe Problem stößt, habe ich es gelöst, indem ich einfach Folgendes hinzugefügt habe:

import 'leaflet/dist/leaflet.css';

Versuche dies

import React, { Component } from 'react'
import Leaflet from 'leaflet';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css';

Leaflet.Icon.Default.imagePath="../node_modules/leaflet"

delete Leaflet.Icon.Default.prototype._getIconUrl;

Leaflet.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});



export default class MapDisplay extends Component {
state = {
    lat: 41.257017,
    lng: 29.077524,
    zoom: 13,
}


render() {
    const position = [this.state.lat, this.state.lng]
    return (
    <Map center={position} zoom={this.state.zoom} style={{height : '400px'}}>
        <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
        <Popup>
            Son Konum
        </Popup>
        </Marker>
    </Map>
    )
}
}

Benutzeravatar von Edgar Mlowe
Edgar Mlowe

Sie können das Problem beheben, indem Sie die folgenden Codezeilen in das Head-Element Ihrer index.html einfügen.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">

<style>
  body {
    padding-bottom: 30px;
  }
  h1, h2, p {
    font-family: sans-serif;
    text-align: center;
  }
  .leaflet-container {
    height: 400px;
    width: 80%;
    margin: 0 auto;
  }
</style>

Hinweis: Sie können das CSS an Ihre Bedürfnisse anpassen.

Benutzeravatar von Chris Lopez
Chris Lopez

Sie sollten dies einfach zu Ihrer CSS-Datei hinzufügen, ich hatte das gleiche Problem wie Sie und diese Methode hat mein Problem behoben:

  @import url("~leaflet/dist/leaflet.css");

.leaflet-container {
  width: 100%;
  height: 100vh;
}

Benutzeravatar von Tetraib
Tetraib

Flyer importieren.css

import 'leaflet/dist/leaflet.css';

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:

<Map
center={[35.6892, 51.3890]}
style={{width: '100%',height: '400px'}}
>

Fügen Sie Höhe und Breite hinzu

1434330cookie-checkKarte der Reaktionsbroschüre wird nicht korrekt angezeigt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy