reactjs - カスタム マーカー アイコンが機能しない

Question

反応リーフレットを使用していて、カスタム マーカー アイコンが必要です。React-leaflet は、Leaflet.Icon オブジェクトを使用してカスタム マーカー アイコンを表示できます。そこで、NPM にリーフレットをインストールし、追加しましimport { L } from 'leaflet';た。

次に追加しました：

const FPIcon = L.Icon.extend({
  options: {
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
  }
});

const purpleIcon = new FPIcon({
          iconUrl: '%PUBLIC_URL%/markers/Bar-Marker.png'
        });

私のレンダリング方法に。

しかし、次のエラーが発生し続けますCannot read property 'Icon' of undefined。

カスタム マーカー アイコンを実現するために、次のことも試しました。

const purpleIcon = L.icon({
    iconUrl: '%PUBLIC_URL%/markers/Bar-Marker.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76]
});

しかし、再びCannot read property 'icon' of undefinedエラーが発生しました。

私が間違っていることについてのアイデアはありますか？

Answer 1

リーフレットのインポートが間違っています。リーフレットを次のようにインポートすると、期待どおりに機能します。

import L from 'leaflet';