未找到 React-Leaflet 标记文件答案

【问题标题】：React-Leaflet marker files not found未找到 React-Leaflet 标记文件
【发布时间】：2018-09-01 15:42:48
【问题描述】：

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

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

GET http://localhost:8080/marker-shadow.png404（未找到）

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

【问题讨论】：

你能标记有用的答案吗？

标签： javascript leaflet react-leaflet

【解决方案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;

【讨论】：

谢谢！缩小时我对这些标记有一个额外的问题：它们“移动”并且变得不准确。您可以通过将 'iconSize: [25,41], iconAnchor: [12,41]' 添加到 DefaultIcon 来解决此问题
谢谢，这几天一直在想办法。
请将此答案标记为已接受

【解决方案2】：

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

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

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
});

【讨论】：

谢谢！ .default 对我有用。不知何故，我在这里找到了我需要的答案:)
我工作过。我刚刚复制了这段代码，它工作了。我不知道为什么。谢谢。

【解决方案3】：

在使用 react、leaflet 和 react-leaflet 时，似乎并非所有内容都正确集成在一起。我遇到了同样的问题，发现了这个

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

你需要重新设置leafelet本身，因为在导入leaflet.css后出现了问题。

希望对你有帮助

【讨论】：

【解决方案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

【讨论】：

【解决方案5】：

将leaflet包中的所有图片复制到公共目录：

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

修复 Leaflet 中的路径

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

【讨论】：

【解决方案6】：

最终为我解决这个问题的是删除：

导入'leaflet/dist/leaflet.css';

来自我的地图组件所在的文件。我最终通过 create-react-app index.html 文件导入了传单 css，并且我的标记能够与我的地图一起加载。希望这可以帮助任何陷入困境的人。

【讨论】：