Next.js React 传单地图未正确显示

Question

我有下一张传单地图：

但是没有正确显示任何东西，只有当我拖动地图并且只加载你可以在左上角看到的部分时，作为第二张图片。

我发现错误只发生在第一次渲染时，如果我在没有刷新的情况下导航到其他页面（下一个 Link 组件）那么它会正确显示。

我的代码：

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

function Map({ coordinates }) {
   const [position, setPosition] = useState(coordinates);
   return (
      <MapContainer center={position} zoom={100} scrollWheelZoom={false} style={{ height: "500px", width: "100%" }}>
         <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}>
            <Popup>
               A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
         </Marker>
      </MapContainer>
   );
}

export default Map;

我已经安装了 react-reaflet 和 leaflet，我还导入了 CSS 并指定了容器的宽度和高度，如 Stack Overflow 中的其他解决方案所示，但没有有效。

接下来如何导入组件（因为leaflet不支持Server Side Rendering）：

/**
 * Leaflet makes direct calls to the DOM when it is loaded, therefore React Leaflet is not compatible with server-side rendering.
 * @see 
 */
const Map = dynamic(() => import("../../components/Map"), {
   loading: () => <p>Map is loading</p>,
   ssr: false, // This line is important. It's what prevents server-side render
});

Answer 1

我刚刚解决了这个问题。

我发现如果我调整 window 地图显示正确，所以我必须做的是每 100 毫秒调用 invalidateSize() 函数来更新所有的屏幕大小时间，这也将在第一次渲染时起作用。

import React, { useState, useEffect } from "react";
import { MapContainer, Circle, TileLayer } from "react-leaflet";
import "leaflet/dist/leaflet.css";

function Map({ coordinates }) {
   const position = coordinates;
   const fillBlueOptions = { fillColor: "#0484D6" };
   const [map, setMap] = useState(null);

   useEffect(() => {
      if (map) {
         setInterval(function () {
            map.invalidateSize();
         }, 100);
      }
   }, [map]);

   return (
      <MapContainer center={position} zoom={20} scrollWheelZoom={false} style={{ height: "400px", width: "100%" }} whenCreated={setMap}>
         <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
         <Circle center={position} pathOptions={fillBlueOptions} radius={50} />
      </MapContainer>
   );
}

export default Map;

考虑到您必须将属性 whenCreated={setMap} 添加到 MapContainer 组件。

Next.js React 传单地图未正确显示

Next.js React Leaflet Map not Showing Properly

javascript

leaflet

reactjs

react-leaflet

next.js