Next.js React Leaflet 地图未正确显示

Question

我有下一个leaflet地图：

但是它没有正确地显示任何内容，只有当我拖动地图并且只加载您在左上角可以看到的部分时，就像第二张图片。

我发现错误只会在第一次渲染时发生，如果我在不刷新的情况下导航到其他页面（下一个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-leaflet和leaflet，也导入了CSS并指定了容器的宽度和高度，正如Stack Overflow中其他解决方案所指示的一样，但仍然无法工作。由于leaflet不支持服务器端渲染，因此我应该如何在Next.js中导入组件？

/**
 * Leaflet makes direct calls to the DOM when it is loaded, therefore React Leaflet is not compatible with server-side rendering.
 * @see https://dev59.com/jOk5XIcBkEYKwwoY49on#64634759
 */
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
});

- Peter Palmer

---

请尝试将其设置为 宽度：500像素。 - Falke Design

@FalkeDesign似乎无法工作 :( - Peter Palmer

zoom={100}？这样对吗？ - Seth Lutske

你可能会在leaflet加载不完整地图中找到一些线索。 - Seth Lutske

是的，我尝试调整缩放但没有效果。@SethLutske - Peter Palmer

这里是我提供的最简单版本： https://dev59.com/BFkS5IYBdhLWcg3wSkxG#73884898 - Akbar isneverdead

Answer 1

关于这个话题的2022年附注：如果您的地图无法正常渲染（缺少瓷砖等），那么听起来您可能忘记遵守文档中提到的每一点：

如果地图未正确显示，最有可能是因为您没有遵循所有先决条件。

确保安装了所有依赖项并使用受支持的版本 确保 Leaflet 的 CSS 已加载 确保您的地图容器具有定义的高度

引用自：https://react-leaflet.js.org/docs/start-setup/

在我的情况下，缺少地图的高度只呈现了一些瓦片。

- briosheje

Answer 2

我刚刚解决了这个问题。

我发现如果我调整窗口大小，地图就会正确显示，所以我需要每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;

请注意，在MapContainer组件中，您需要添加属性whenCreated={setMap}。

- Peter Palmer