Как добавить точку при клике в react-yandex-maps?

Для добавления точки при клике в React-yandex-maps, вам потребуется следовать определенным шагам.

Шаг 1: Установка React-yandex-maps
Первым шагом является установка React-yandex-maps, который является надстройкой React для манипулирования Yandex Maps API. Вы можете установить его с помощью npm или yarn команды:

npm install react-yandex-maps
или
yarn add react-yandex-maps

Шаг 2: Импорт компонента YMaps и Map из React-yandex-maps
После установки React-yandex-maps, вы должны импортировать YMaps компонент и Map компонент в вашем компоненте React.

import React from 'react';
import { YMaps, Map } from 'react-yandex-maps';

Шаг 3: Создание пустой карты
Затем вам нужно создать пустую карту на вашем компоненте:

function MapComponent() {
  return (
    <YMaps>
      <div style={{ width: '100%', height: '400px' }}>
        <Map
          defaultState={{
            center: [55.751574, 37.573856],
            zoom: 9,
          }}
        />
      </div>
    </YMaps>
  );
}

Шаг 4: Добавление обработчика событий клика и точки на карте
Теперь, чтобы добавить точку при клике на карту, вам нужно добавить обработчик событий клика на компонент Map. Вы можете сделать это, добавив атрибуты onBoundsChange и onActionend к Map компоненту:

function MapComponent() {
  const [points, setPoints] = React.useState([]);

  const handleMapClick = React.useCallback((e) => {
    const point = e.get('coords');
    setPoints([...points, point]);
  }, [points]);

  return (
    <YMaps>
      <div style={{ width: '100%', height: '400px' }}>
        <Map
          defaultState={{
            center: [55.751574, 37.573856],
            zoom: 9,
          }}
          onBoundsChange={handleMapClick}
        />
        {points.map((point, index) => (
          <Placemark key={index} geometry={point} />
        ))}
      </div>
    </YMaps>
  );
}

В приведенном выше примере, мы использовали хук useState для хранения массива точек на карте, а также хук useCallback для создания стабильного обработчика событий handleMapClick. Когда пользователь кликает на карту, новая точка добавляется в массив точек и отображается на карте с помощью компонента Placemark.

Таким образом, при каждом клике на карту будет добавляться новая точка, которая будет отображаться на карте.

Это основной подход к добавлению точки при клике в React-yandex-maps. Вы можете настроить и добавить дополнительные функции в соответствии с вашими потребностями.