React Leaflet: всплывающие окна разбиваются после упаковки маркеров в <MarkerClusterGroup> - PullRequest
Новая
       62

React Leaflet: всплывающие окна разбиваются после упаковки маркеров в <MarkerClusterGroup>

0 голосов
/ 06 мая 2020

У меня есть список адресов, которые я передаю своему компоненту через props, чтобы создать маркеры для каждого из них.

Это сработало нормально (всплывающее окно открывается по щелчку), но когда я оборачиваю маркеры в MarkerClusterGroup, всплывающие окна больше не работают, и правильное количество маркеров отображается только в начале - отображается неправильный номер как только я увеличиваю карту.

Консоль браузера сообщает: TypeError: L.FeatureGroup.prototype.listens is undefined

Кто-нибудь знает, что происходит? 


export default class Map extends React.Component {

        constructor(props) {
                super(props);
                this.state = {
                        lat: 52.227326,
                        lng: 19.353067,
                        zoom: 8,
                        minZoom: 6,
                        markers: []
                };}

        createMarkers() {
                const changes = this.props.changes
                let test = 0
                const markers = changes.map(change => {
                        test++
                        return (<Marker position={[change.lat, change.lon]} key={test}>
                                <Popup>
                                        New name: {change.new_name.full_name} <br /> Old name: {change.old_name.full_name} <br /> Place: {change.place_name}
                                </Popup>
                        </Marker>)
                })

                this.setState({ markers: markers })}

        componentDidMount() {this.createMarkers(); }



        render() {
                const position = [this.state.lat, this.state.lng]
                const layer = 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png'

                return (

                        <LeafletMap className="shadow-sm" style={{ height: this.state.height }} center={position} zoom={this.state.zoom} minZoom={this.state.minZoom} >

                                <TileLayer
                                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                        url={layer}>
                                </TileLayer>

                                <MarkerClusterGroup spiderLegPolylineOptions={{
                                        weight: 0,
                                        opacity: 0,
                                }}>
                                        {this.state.markers}
                                </MarkerClusterGroup>

                        </LeafletMap >) }}
...