0

我正在使用 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错误。

关于我做错了什么的任何想法？

4

2 回答 2

0

您的传单导入错误。导入传单如下，之后它将按预期工作：

import L from 'leaflet';
于 2018-11-12T10:29:33.397 回答
-1

使用下方组件添加自定义标记

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

于 2017-10-06T12:09:27.920 回答