使用 Nextjs 设置传单不起作用

Question

我目前正在尝试在我的网站上添加可自定义的地图。但是当我尝试添加 React Leaflet 时，地图是可见的，但切入了不同的“传单图块”。 我不知道是什么导致它以这种特殊的方式出现。

我正在使用 Nextjs 13.4.19、react-leaflet 4.2.1 和 leaflet 1.9.4。

我希望地图位于橙色块中。

这是我的代码：

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

export default function Homepage() {
<>
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
</>;
  return (
    <div className="bg-orange-aggro">
              <MapContainer
                center={[51.505, -0.09]}
                zoom={13}
                scrollWheelZoom={false}
                height="400px"
              >
                <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>
  );
}

在文档中：

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

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

我不知道我做错了什么，任何帮助将不胜感激。 谢谢！

Answer 1

如果您将 Next.js 与应用程序目录一起使用，则需要添加到您的地图组件中：

    'use client'

    import 'leaflet/dist/leaflet.css'

而你想在哪里使用它，你需要动态导入它为：

    import dynamic from 'next/dynamic'

    const Map = dynamic(async () => await import('PATH OF MAP COMPONENT'), { ssr: false })

Answer 2

您需要添加这行代码：

import "leaflet/dist/leaflet.css";

Answer 3

@Clement，首先你必须像 Ensar 所说的那样添加这一行

此外，您需要将样式添加为对象

import "leaflet/dist/leaflet.css";
.
.
.
    <MapContainer
      center={[51.505, -0.09]}
      zoom={13}
      scrollWheelZoom={false}
      style={{height: '400px'}}
    >