React Leaflet 仅显示标记阴影

Question

我正在使用：

"leaflet": "1.9.4",
"next": "15.1.4",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-leaflet": "5.0.0"

这是我用来渲染标记的 React 代码：

          const position = [restaurant.latitude, restaurant.longitude]
          return (
            <Marker
              key={restaurant.restaurantNumber}
              position={position}
            />)

我已经将图形资源复制到我的项目的公共目录中。在Chrome开发者工具中没有加载错误，因此可以找到所有资源，但在地图上看起来像这样：

仅渲染阴影，而不渲染标记本身。

检查 HTML 时，这就是那个标记：

<img src="marker-icon-2x.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(629px, 584px, 0px); z-index: 584;">

奇怪的是，样式包含 25px 的显式宽度（根据 Chrome 开发工具，永远不会被覆盖），但元素的宽度是 0px。

当我尝试手动添加图像时：

            <Marker
              key={restaurant.restaurantNumber}
              position={position}
              icon={L.icon({
                iconUrl: 'marker-icon.png', // specify the path to your icon image
                iconSize: [25, 41], // size of the icon
                iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
                popupAnchor: [1, -34], // point from which the popup should open relative to the iconAnchor
                shadowUrl: 'marker-shadow.png',
                shadowSize: [41, 41], // size of the shadow
                shadowAnchor: [12, 41] // point of the shadow which will correspond to marker's location
              })}

我仍然只看到影子。

当我在上面的代码中输入

shadowUrl: 'marker-icon.png'

时，我得到了这个：

可以清晰地读取图像文件。

知道我可能做错了什么吗？

Answer 1

leaflet包经常有css问题，你必须确保从leaflet手动导入css。帮助我解决这个问题的一个软件包是

leaflet-defaulticon-compatibility

在我的主地图组件中，我将其与传单中的 css 一起导入。

import "leaflet-defaulticon-compatibility";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet/dist/leaflet.css";