問題描述

我有非常簡單的代碼來使用 react-leaflet 顯示地圖并在其上放置一個標(biāo)記.但是，我在瀏覽器控制臺中收到以下兩個錯誤

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

GET http://localhost:8080/marker-icon-2x.png404(未找到)

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

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

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

我嘗試通過下載這兩個圖像并將它們放在根目錄來解決此問題.有用.但是，如何更改 react-leaflet 標(biāo)記元素查找標(biāo)記圖像的 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 傳單不包含圖像，您需要重新設(shè)置默認(rèn)圖標(biāo)圖像.

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.

您還可以從公共鏈接之一添加圖標(biāo)

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;

這篇關(guān)于未找到 React-Leaflet 標(biāo)記文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！