reactjs - 地图只加载几个方块

Question

我正在使用 React-Leaflet，使用与我创建组件的示例相同的代码。该组件位于我正在处理的标题组件下。传单只将地图的几个正方形呈现给浏览器，有人可以帮忙吗？

编码：

import Header from "./Header";
import BodyHeader from './BodyMap';

function App() {
  return (
    <div className="flex flex-col">
      <Header />
      <BodyHeader />
    </div>
 );
}

export default App;


import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

function BodyMap(){
    return (
        <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true} >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]} style={{height: 10, width:100 }}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    )
}

export default BodyMap;

风景

标签： reactjsreact-leaflet