Question

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

我曾尝试将手动文件放在创建标记的组件的根文件夹中，但后来我发生致命错误

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的“抽象”，因此它使用相同的功能。要创建自定义图标，您必须创建一个divIcon。举个实例，去那里： https://react-leaflet.js.org

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

1 个答案: