找不到React-Leaflet标记文件 [英] React-Leaflet marker files not found

问题描述

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

I've got very simple code to display a map using react-leaflet and place a marker on it. However, i get the following two errors in my browser console

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

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

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

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

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

I tried to fix this issue by downloading those two images and placing them at the root. It works. However, how can i change the URL the react-leaflet marker element looks for the marker images? I'd like to store them in "./images" rather than at the root.

推荐答案

尝试执行此操作:)

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

React leaflet for some reason do not include images and you will need to reset default icons image.

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

Below is some working example, I hope it will solve your issue.

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

You also can add icons from one of public link

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;

这篇关于找不到React-Leaflet标记文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！