反应传单标记组件中图标的路径

Question

我正在使用 react-leaflet 库。
渲染标记后，我得到一个没有文件的错误。

我曾尝试将文件手动放入创建标记的组件的根文件夹中，但随后出现致命错误

TypeError: options.icon.createIcon is not a function

下面是整个组件代码。

import React, { Component } from 'react';
import { Marker, Tooltip, Polygon } from 'react-leaflet';
import L from 'leaflet';
import './style.css';
import icon from './marker.svg';

/**
 * @class ./widgets/SeatMap/components/LeafletMap/components/CategoryControl/components/ShapeLayer
 */
class ShapeLayer extends Component
{
    /**
     * @type {object}
     */
    shapes = {};

    /**
     * Constructor.
     *
     * @param {object} props
     */
    constructor (props)
    {
        super(props);
        this.shapes = props.shapes;
    }

    /**
     * @returns {XML}
     */
    render() {
        return (
            <div className={'ShapeLayer'}>

                {
                    this.shapes['texts'].map(text => {
                        return (
                            <Marker key={text['id']} position={text['coordinates']} draggable={false} opacity={0.01} icon={icon}>
                                <Tooltip direction={"center"} permanent className={'shape-tooltip'}>
                                    <span>{text['text']}</span>
                                </Tooltip>
                            </Marker>
                        );
                    })
                }

                {
                    this.shapes['polygons'].map(polygon => {
                        return (
                            <Polygon key={polygon['id']} positions={polygon['coordinates']} fillColor={"white"} color={'gray'} />
                        );
                    })
                }
            </div>
        )
    }
}

export default ShapeLayer;

我该如何解决这个问题？

Answer 1

您好，您不能直接使用那样的图标。 React Leaflet 是 Leaflet 的 "abstraction"，因此它使用相同的功能。要创建自定义图标，您必须创建一个 divIcon。一个活生生的例子去那里： https://react-leaflet.js.org

反应传单标记组件中图标的路径

Path to icon in react-leaflet Marker component

marker

leaflet

react-leaflet