Question

我有非常简单的代码来使用react-leaflet显示地图并在其上放置标记。但是，我在浏览器控制台中收到以下两个错误

获取http://localhost:8080/marker-icon-2x.png 404（未找到）

获取http://localhost:8080/marker-shadow.png 404（未找到）

我尝试通过下载这两个图片并将它们放在根目录来解决此问题。有用。但是，如何更改react-leaflet标记元素查找标记图像的URL？我想将它们存储在＆＃34; ./ images＆＃34;而不是根源。

Answer 1

尝试执行此操作：）

由于某些原因，反应单张不包含图片，您需要重新设置默认图标图像。

下面是一些可行的示例，希望它能解决您的问题。

您还可以从公共链接之一添加图标

https://cdnjs.com/libraries/Leaflet.awesome-markers

import React, { Component } from 'react';
import L from 'leaflet';
import {
    Map, TileLayer, Marker, Popup
} from 'react-leaflet'
import 'leaflet/dist/leaflet.css';
import './style.css';


import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

Answer 2

当使用react，leaflet和react-leaflet时，似乎并不是所有的东西都正确地集成在一起。我遇到了同样的问题，发现了这个问题

https://github.com/PaulLeCam/react-leaflet/issues/453

您需要重新设置leaflet本身，因为导入leaflet.css后出现故障。

希望有帮助

Answer 3

将所有图片从传单包复制到公共目录：

cp node_modules/leaflet/dist/images/* {PUBLIC_WEB_DIRECTORY}/leaflet_images/

修复 Leaflet 中的路径

import L from 'leaflet';
L.Icon.Default.imagePath='leaflet_images/';

Answer 4

为 Next.js 添加答案

将标记图标从 node_modules/leaflet/dist/images 复制到 public/images，类似于 /images/marker-icon.png
创建传单图标引用并在标记中使用引用

const icon = L.icon({ iconUrl: "/images/marker-icon.png" });

// some other code

<Marker key={obj.id} position={position} icon={icon}>

// rest of the code

Answer 5

这是对我有用的解决方案：

我在文件顶部添加了以下几行：

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

delete L.Icon.Default.prototype._getIconUrl;

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

未找到React-Leaflet标记文件

5 个答案: