未找到React-Leaflet标记文件

Question

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

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

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

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

Answer 1

试着这样做:)

由于某种原因，React传单不包含图像，您需要重置默认图标图像。

下面是一些工作示例，我希望它能解决您的问题。

您还可以从其中一个公共链接添加图标

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

当使用反应，传单和反应传单时，似乎并非所有东西都正确地整合在一起。我有同样的问题，发现了这一点

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

您需要再次设置传单本身，因为在导入leaflet.css后出现问题。

希望能帮助到你