带有反应传单的错误显示

Question

我从 react 开始，我想使用一个名为“react-leaflet”的模块来制作地图。 但问题是我的地图最后在我的页面上有一个显示错误。 你能帮帮我吗？

组件图：

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>
        );
    }
}

Bug 展示：https://imgur.com/ojNDL3Z

Answer 1

需要在你的index.js中导入leaflet.css，并给地图容器一个高度。

index.js：

import "leaflet/dist/leaflet.css";

地图传单：

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

Demo