React Leaflet 标记图标未显示我的 next.js 应用程序

Question

我正在使用我的 next.js 应用程序的 React Leaflet。React Leaflet 标记已损坏，请参见图像。我正在使用自定义市场，但不起作用。我已经整理了一个非常简单的 React / Leaflet 演示，但标记图标根本没有显示

import { useState, useEffect, useRef } from "react";
import "leaflet/dist/leaflet.css";
import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  useMap,
  useMapEvents,
} from "react-leaflet";
import { useSelector } from "react-redux";
import { useCallback } from "react";
import { useMemo } from "react";


function LocationMarker({ lat, lng }) {
  const [position, setPosition] = useState(null);
  const [bbox, setBbox] = useState([]);
  const map = useMap();

  useEffect(() => {
    map.flyTo([lat, lng], map.getZoom());
  }, [lat]);

  return position === null ? null : (
    <Marker position={position}>
      <Popup>You are here</Popup>
    </Marker>
  );
}

export default function EditAddedMap({ lat, lng, setLat, setLng }) {
  const { resturant } = useSelector((state) => state);

  return (
    <MapContainer center={[lat, lng]} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <LocationMarker lat={lat} lng={lng} />
      <DraggableMarker lat={lat} lng={lng} setLng={setLng} setLat={setLat} />
    </MapContainer>
  );
}

Answer 1

尝试安装在这里找到的

leaflet-defaulticon-compatibility

https://www.npmjs.com/package/leaflet-defaulticon-compatibility

并相应地导入它：

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

Answer 2

这对我在带有react-leaflet的nextjs上有用

import L from 'leaflet';
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
import markerIcon from 'leaflet/dist/images/marker-icon.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
    iconUrl: markerIcon.src,
    iconRetinaUrl: markerIcon2x.src,
    shadowUrl: markerShadow.src,
})