Файлы маркеров React-Leaflet не найдены

У меня есть очень простой код для отображения карты с помощью листовки-реакции и размещения на ней маркера. Однако я получаю следующие две ошибки в консоли моего браузера

ПОЛУЧИТЬ http://localhost:8080/marker-icon-2x.png 404 (Не Нашел)

ПОЛУЧИТЬ http://localhost:8080/marker-shadow.png 404 (не найдено)

Я попытался решить эту проблему, загрузив эти два изображения и поместив их в корень. Оно работает. Однако как я могу изменить URL-адрес, который элемент маркера response-leaflet ищет изображения маркера? Я бы хотел хранить их в "./images", а не в корне.


javascript leaflet react-leaflet
person user3059217    schedule 23.03.2018    source источник
comment
Вы можете отметить полезный ответ?   -  person Stevan Tosic    schedule 07.01.2019

Ответы (5)


arrow_upward
50
arrow_downward

Попробуй сделать это :)

Листовка 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;
person Stevan Tosic    schedule 07.07.2018
comment
Отлично работает, спасибо - person Hvitis; 27.11.2020
comment
Спасибо! У меня была дополнительная проблема с этими маркерами при уменьшении масштаба: они двигались и становились неточными. Вы можете исправить это, добавив 'iconSize: [25,41], iconAnchor: [12,41]' в свой DefaultIcon. - person EngJon; 22.12.2020

arrow_upward
5
arrow_downward

Кажется, что не все вещи должным образом объединены вместе при использовании react, sheet и react-leaflet. У меня была такая же проблема, и я нашел это

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

Вам нужно заново настроить Lefelet, так как что-то сломалось после импорта leaflet.css.

Надеюсь, это поможет

person develucas    schedule 04.09.2018

arrow_upward
0
arrow_downward

Скопируйте все изображения из пакета листовок в общедоступный каталог:

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

Исправить путь в Leaflet

import L from 'leaflet';
L.Icon.Default.imagePath='leaflet_images/';
person ninja    schedule 21.03.2021

arrow_upward
0
arrow_downward

Добавление ответа для Next.js

  1. Скопируйте значок маркера с node_modules/leaflet/dist/images на public/images, например, /images/marker-icon.png

  2. Создайте ссылку на значок Leaflet и используйте ссылку в маркере

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

// some other code

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

// rest of the code
person ch4nd4n    schedule 16.04.2021

arrow_upward
0
arrow_downward

Вот решение, которое сработало для меня:

Я добавил следующие строки вверху файла:

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
});
person Grovile    schedule 02.07.2021