react-leaflet地图不显示

Question

我在我的一个组件中有以下代码

class MyMap extends Component {

   state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 11
    };

    render() {
        const position = [this.state.lat,this.state.lng]
         return (
             <MapContainer  className="mymap" center={position} zoom={this.state.zoom}  scrollWheelZoom={false}>
             <TileLayer
                   attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>  contributors'
                   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              <Marker position={position}>
              </Marker>
            </MapContainer >
      )
  }
}

另外，我已经通过这个命令安装了leaflet

  npm install -s react-leaflet

我还在我的index.html文件中插入了小叶的CSS

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

另外，我在MapContainer中给出了一个

ClassName="mymap"

，其中包含以下CSS代码

 .mymap {
     height: '100vh';
     width: 100%;
} 

所以我的问题是我的地图没有显示出来，有人能帮我吗？

Answer 1

导入leaflet.css

import 'leaflet/dist/leaflet.css'

然后为<MapContainer>设置内联样式

<MapContainer style={{ height: "450px", width: "100%" }} center={position} zoom={this.state.zoom}>

Answer 2

我解决了我的问题。我必须把这个从我的index.html中去掉

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq /sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>

我还在我的MyMap组件中插入了以下内容

 import 'leaflet/dist/leaflet.css';