Question

我试图在reactjs中添加缩放到传单地图的自定义按钮这是我的代码

import React, {Component} from 'react';
import { Map, TileLayer, Marker, Popup, ZoomControl } from 'react-leaflet';
import Control from 'react-leaflet-control';
import Button from '@material-ui/core/Button';

class LeafletMapComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            lat: 51.505,
            lng: -0.09,
            zoom: 13
        }
    }

    render() {
        const position = [this.state.lat, this.state.lng];
        return (
            <Map ref={m => { this.leafletMap = m; }} zoomControl={false} center={position} zoom={this.state.zoom}>
                <TileLayer
                    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                />

                <Control position="topleft" >

                </Control>  

            </Map>
        );
    }
}

我使用react-leaflet-control创建自定义控件，但它给了我一个错误'Error: createLeafletElement() must be implemented'

Answer 1

由于将Leaflet更新为v 1.1，组件必须包含createLeafletElement函数，否则MapLayer.js将抛出错误。

// eslint-disable-next-line no-unused-vars

MapLayer.prototype.createLeafletElement = function createLeafletElement（props）{ 抛出新的错误（＆＃39; createLeafletElement（）必须实现＆＃39;）; };

在ClusterLayer.js中实现createLeafletElement函数以修复此错误。

ClusterLayer.prototype.createLeafletElement = function createLeafletElement（）{};

Reactjs Leaflet自定义控制按钮

1 个答案: