javascript - 找不到 React-Leaflet 标记文件

Question

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

GET http://localhost:8080/marker-icon-2x.png 404 (Not Found)

GET http://localhost:8080/marker-shadow.png 404 (Not Found)

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

Answer 1

尝试这样做:)

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

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

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

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;