Question

我正在使用react-leaflet并想要一个自定义标记图标。 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';

Answer 2

使用Below组件添加自定义标记

https://github.com/tomchentw/react-google-maps/issues/144

自定义标记图标不起作用

2 个答案: