web-dev-qa-db-ja.com

React-Leafletマーカーファイルが見つかりません

反応リーフレットを使用して地図を表示し、その上にマーカーを配置するための非常に単純なコードがあります。ただし、ブラウザコンソールに次の2つのエラーが表示されます

GET http：// localhost：8080/marker-icon-2x.png 404（見つかりません）

GET http：// localhost：8080/marker-shadow.png 404（見つかりません）

この2つのイメージをダウンロードしてルートに配置することで、この問題を修正しようとしました。できます。ただし、react-leafletマーカー要素がマーカー画像を探すURLを変更するにはどうすればよいですか？ルートではなく「./images」に保存したい。

javascriptleafletreact-leaflet
10
user3059217

これを試してください:)

何らかの理由でReactリーフレットに画像が含まれていないため、デフォルトのアイコン画像をリセットする必要があります。

以下は実際の例です。問題が解決することを願っています。

パブリックリンクの1つからアイコンを追加することもできます

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;
20
Stevan Tosic

React、leaflet、react-leafletを使用すると、すべてが適切に統合されるわけではありません。私は同じ問題を抱えており、これを見つけました

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

Leaflet.cssをインポートした後で何かが壊れたため、leaflet自体を再度セットアップする必要があります。

それが役に立てば幸い

1
develucas