反应传单地图不显示

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

我还通过这个命令安装了传单

  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

导入传单.css

import 'leaflet/dist/leaflet.css'

然后设置内联样式<MapContainer>

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