带有 require js 的 react-leaflet 显示损坏的地图

如何解决带有 require js 的 react-leaflet 显示损坏的地图

地图出现在父 div 之外并且显示方式已损坏。我尝试按照 StackOverflow 上针对类似问题的建议为地图组件添加高度并在 index.html 中链接传单 CSS。但似乎没有什么能解决我的问题。有人可以帮我吗？

import React,{ Component } from "react";
import { Map } from "react-leaflet";
import { TileLayer } from "react-leaflet";
import { Marker } from "react-leaflet";

class GeoData extends Component {
    constructor (props) {
        super(props);
        this.state = {};
    }

    render () {
        var center=[15.29,74.124];
        return (
            <div style={{width:'1200px',height:'600px'}}>
                <p className="sub-head1">GEOGRAPHICAL DATA</p>
                <Map center={center} zoom={13} style={{ height: '80px'}}>
                <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
                    <Marker position={center} />
                </Map>
            </div>
        );
    }
}
export default GeoData;

截图：