Дисплей ошибок с листовкой реакции - PullRequest
Новая
       34

Дисплей ошибок с листовкой реакции

0 голосов
/ 02 января 2019

Я начинаю с реакции и хочу использовать модуль, который называется «реакция-листовка», для создания карты.Но проблема в том, что у меня есть ошибка отображения моей карты в конце на моей странице.Можете ли вы помочь мне, пожалуйста?

Карта компонентов: 

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

export default class MapLeaflet extends Component {

    constructor(props) {
        super(props);
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
    }

    render() {
        const position = [this.state.lat, this.state.lng];
        console.log("dqdsqdq");
        return(
            <div id="map">
                <Map center={position} zoom={13}>
                    <TileLayer
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    />
                    <Marker position={position}>
                        <Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
                    </Marker>
                </Map>
            </div>
        );
    }
}

Страница для отображения карты: 

import './Apies.css';
import React, { Component } from 'react';
import MapLeaflet from '../../components/Map/Map.js';

export default class Apies extends Component {

    render() {
        return (
            <section className="Apies">
                <main className="main">
                    <h2>Map</h2>
                    <MapLeaflet/>
                </main>
            </section>
        );
    }
}

Отображение ошибок: https://imgur.com/ojNDL3Z

1 Ответ

0 голосов
/ 02 января 2019

Требуется импортировать leaflet.css в ваш index.js и указать высоту для сопоставления контейнера.

index.js: 

import "leaflet/dist/leaflet.css";

MapLeaflet: 

  ...
<Map style={{ height: "100vh" }} center={position} zoom={13}>

Демо

...