Как реализовать установку маркеров на карту, но не больше двух, и так, чтоб по третьему клику маркеры обнулялись?

Question

[Gauthier]

Помогите, пожалуйста, реализовать функцию в React+Leaflet.
Необходимо, чтоб при клике на карту (onClick почему-то не работает), ставился маркер на карту, но не больше двух. Как только есть два маркера выполняется необходимое действие (обращение к API с координатами двух точек и прокладывание маршрута - это функция работает), если совершен третий клик, то два предыдущих маркера обнуляются.
Столкнулся с тем, что onClick попросту не работает.
Вот код:

import React, { Component } from "react";
import L from "leaflet";
import { MapContainer as Map, TileLayer, ZoomControl } from "react-leaflet";
import "leaflet/dist/leaflet.css";

import GeoJson from './GeoJson';

L.Icon.Default.imagePath = "https://unpkg.com/leaflet@1.5.0/dist/images/";

export default class BaseMap extends Component {
    constructor() {
        super();

        this.state = {};
    }

    AddMarker(e) {
        console.log(e.latlng);
    }

    render() {
        return (
            <div className="container">
                <Map 
                    zoom={10}
                    zoomControl={false}
                    center={{lat: 59.939095, lng: 30.315868}}
                    onClick={this.AddMarker}
                >
                    <TileLayer
                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    />
                    <ZoomControl position="topright" />
                    <GeoJson />
                </Map>
            </div>
        );
    }
};

Comments

[krka92]

Либо при вызове привязываем контекст
onClick={this.AddMarker.bind(this)}
Либо в параметр передаём стрелочную функцию
onClick={e => this.AddMarker(e)}

Почитайте про обработку событий в React

Answer 1

[krka92]

Либо при вызове привязываем контекст
onClick={this.AddMarker.bind(this)}
Либо в параметр передаём стрелочную функцию
onClick={e => this.AddMarker(e)}

Почитайте про обработку событий в React

Comments

[Gauthier]

Благодарю! Честно, уже достаточно долго вожусь, и все не мог понять, что делать. Совсем недавно изучаю React при этом.

Answer 2

[0xD34F]

state = {
  markers: [],
  maxMarkersNum: 666,
}

onClick = ({ latlng }) => {
  this.setState(({ markers, maxMarkersNum }) => ({
    markers: markers.length >= maxMarkersNum
      ? []
      : [ ...markers, latlng ],
  }));
}

<Map onClick={this.onClick}>
  {this.state.markers.map(n => <Marker position={n} />)}
</Map>

https://jsfiddle.net/o8wbd6sa/

Comments

[Gauthier]

Спасибо огромное! Вы невероятно круты!