1

我已经导入了 Leaflet 模块以及一些删除图标的代码。

import L from "leaflet";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("./images/marker-icon-2x.png"),
  iconUrl: require("./images/marker-icon.png"),
  shadowUrl: require("./images/marker-shadow.png"),
});

标记图标位于我的图像文件夹中。我也试过直接要求：

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
  iconUrl: require("leaflet/dist/images/marker-icon.png"),
  shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
});

但我仍然得到一个坏掉的标记。

4

2 回答 2

2

如果您正在使用create-react-app，这应该与 Webpack 配置一起使用。您必须将此代码放在它将在您的<Marker>元素呈现之前执行的位置，如文件顶部App.tsx：

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,
    iconRetinaUrl: markerIcon2x,
    shadowUrl: markerShadow,
})
于 2021-10-05T21:17:18.687 回答
0

使用Leaflet-defaulticon-compatibility插件，它应该可以在没有更多代码的情况下工作，前提是您的构建引擎配置已经设置为处理 CSS 中的 URL：

$ npm install leaflet-defaulticon-compatibility --save

import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from 'leaflet';
import 'leaflet-defaulticon-compatibility';

免责声明：我是该插件的作者

于 2021-10-07T04:54:25.473 回答