Как при движении карты сохранять пин всегда в центре?

Для того чтобы сохранить пин (или маркер) в центре карты при движении, мы можем воспользоваться функциональностью React и некоторыми методами библиотеки, используемой для работы с картами, например, Leaflet или Google Maps.

Прежде чем начать, вам потребуется импортировать и настроить карту вашей выбранной библиотеки в вашем проекте React. Предположим, что вы используете Leaflet.

1. Установите библиотеку Leaflet, выполнив команду в вашей командной строке:

npm install leaflet

2. Импортируйте необходимые компоненты в вашем компоненте React:

import React, { useEffect, useRef, useState } from 'react';
import { MapContainer, Marker } from 'react-leaflet';

3. Создайте функциональный компонент React (или обновите свой существующий компонент):

const MapWithMarker = () => {
  const [center, setCenter] = useState([51.505, -0.09]);
  const mapRef = useRef(null);

  useEffect(() => {
    const map = mapRef.current;

    if (map) {
      map.on('move', () => {
        const newCenter = map.getCenter();
        setCenter([newCenter.lat, newCenter.lng]);
      });
    }
  }, []);

  // Ваш код для установки начального состояния карты и остальной функциональности

  return (
    <MapContainer center={center} zoom={13} ref={mapRef}>
      {/* Ваш код для добавления слоев карты */}
      <Marker position={center} />
    </MapContainer>
  );
};

export default MapWithMarker;

4. Внутри компонента MapWithMarker мы используем useState для отслеживание текущего центра карты и useRef для получения ссылки на карту Leaflet. В useEffect мы добавляем прослушиватель на событие move карты, чтобы обновить центр при каждом ее движении. Мы устанавливаем начальное состояние центра на [51.505, -0.09], но вы можете выбрать любое начальное значение по вашему усмотрению.

5. Внутри возвращаемого JSX мы устанавливаем center в качестве значения свойства center в компоненте MapContainer, чтобы обновить позиционирование слоя карты. Мы также добавляем компонент маркера Marker с позицией равной center, чтобы отображать пин в центре карты.

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

В целом, подход остается примерно таким же вне зависимости от того, какую библиотеку для работы с картами вы выбрали. Вам просто нужно сделать несколько адаптаций в соответствии с API выбранной библиотеки.