Map 未使用 react-leaflet 显示，但未记录任何错误

Question

在 5 小时没有让我的仪表板显示后，代码运行完美，但是现在地图没有显示，当我检查控制台时我没有收到任何错误，有什么想法吗？我按照他们所说的完全按照 react-leaflet 上的教程进行了操作，但无法显示它

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

export default function Dashboard({ setUser, setAuthState, user }) {
  useEffect(() => {
    console.log(user);
    getUserData(user);
  }, []);

  const [issData, setIssData] = useState(null);

  useEffect(() => {
    getIssData().then((data) => {
      setIssData(data);
    });
  }, [issData]);

  return (
    <div className="dashboard">
      <Nav />
      <div className="main">
        <MenuPopupState
          setUser={setUser}
          setAuthState={setAuthState}
          user={user}
        />
      </div>
      <Fire user={user} />
      <div>
        {issData ? (
          <div>
            <h1>Current Position of ISS</h1>
            <p>Latitude: {issData.iss_position.latitude}</p>
            <p>Longitude: {issData.iss_position.longitude}</p>
          </div>
        ) : (
          <p>Loading...</p>
        )}
      </div>
      <div>
        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          height="100px"
        >
          <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={[51.505, -0.09]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </div>
  );
}


I tried to display the map from leaflet and now the code seems to be working but im not getting any map from leaflet

Answer 1

我不知道这是否会解决它，但我会尽力提供帮助，有时需要明确定义地图及其父容器的大小，在下面的示例中，我使用 tailwind 设置宽度和长度，但你可以使用普通的 css：

      const Markers = () => {
        useMapEvent({
          click(e) {
            setMarkerPos([e.latlng.lat, e.latlng.lng]);
          },
        });
        return markerPos ? (
          <Marker key={markerPos[0]} position={markerPos} interactive={false}>
            <Popup>This marker shows where your listing is</Popup>
          </Marker>
        ) : null;
      };

    <div className="w-32 h-32">
      {renderMap && (
        <MapContainer
          center={markerPos || center}
          zoom={8}
          scrollWheelZoom={true}
          className="w-full h-full"
          onClick={(e) => setCenter([e.latlng.lat, e.latlng.lng])}
        >
          <Markers />
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </MapContainer>
      )}
    </div>

也可能是因为缺少一些进口货

    import {
      MapContainer,
      TileLayer,
      marker,
      popup,
      useMapEvent,
    } from "react-leaflet";
    import "leaflet/dist/leaflet.css";
    import L from "leaflet";

希望我有帮助

Answer 2

我遇到了这个确切的问题，我的问题源于

MapContainer

的容器没有任何尺寸。

尝试改变

<div>
    <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          height="100px"
        >
    ...
   </MapContainer>
</div>

到

<div style={{ width: 500, height: 300 }}> <!-- We need dimensions here! -->
    <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          height="100px"
        >
    ...
   </MapContainer>
</div>