反应传单。地图未显示

Question

我已经尝试在我的网站中创建地图部分至少一个小时了，但是反应传单或传单根本不起作用。我按照医生所说的每一步进行操作，我观看了很多视频，检查了网站上的其他问题并尝试了它们，我很确定我所做的一切都是正确的，但这对我来说是一样的。我的电脑没有问题，所有必要的库都已安装，以防你问（我正在使用 vite）。
我期待这个结果 如果您知道的话，请随时告诉我可能导致这个恼人问题的原因。

这是组件。

import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

const position = [40, 0];

export default function ContactLocation() {
  return (
    <section>
      <div className="container max-w-full h-[600px]">
        <MapContainer
          center={position}
          zoom={15}
          scrollWheelZoom={true}
          className="h-[80vh]"
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={position}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </section>
  );
}

这就是结果

这里是库的版本，以备不时之需

“传单”：“^1.9.4” “反应传单”：“^4.2.1”

Answer 1

更改高度和宽度然后检查。