В этой записи блога мы рассмотрим, как использовать React Google Maps для отображения мест посадки и высадки в виде маркеров на карте. Кроме того, мы научимся рисовать прямую или ломаную линию между этими маркерами. Мы предоставим вам пошаговые инструкции и примеры кода, чтобы облегчить понимание процесса. Давайте погрузимся!

Настройка React Google Maps.
Чтобы начать, убедитесь, что вы имеете базовое представление о React и создали новый проект React. Установите необходимые зависимости, выполнив следующую команду:

npm install react-google-maps

Создание компонента карты.
Далее мы создадим компонент карты, который будет отображать карту и обрабатывать размещение маркеров и рисование полилиний. Начните с импорта необходимых модулей:

import React, { useState } from 'react';
import { GoogleMap, Marker, Polyline } from 'react-google-maps';

Внутри функционального компонента определите начальное состояние для хранения положений маркеров:

const [markerPositions, setMarkerPositions] = useState([]);

Отображение карты:
Отобразите компонент GoogleMap и установите начальный центр и уровень масштабирования:

<GoogleMap
  defaultCenter={{ lat: 37.7749, lng: -122.4194 }}
  defaultZoom={12}
>

Размещение маркеров.
Чтобы разместить маркеры на карте, мы прослушиваем событие щелчка и соответствующим образом обновляем состояние положения маркеров. Добавьте следующий код в свой компонент GoogleMap:

onClick={(e) => {
  const { latLng } = e;
  setMarkerPositions([...markerPositions, latLng]);
}}

Отображение маркеров.
Чтобы отобразить маркеры на карте, сопоставьте массив маркерПозиции и создайте компонент «Маркер» для каждой позиции:

{markerPositions.map((position, index) => (
  <Marker key={index} position={position} />
))}

Рисование полилинии.
Чтобы нарисовать прямую линию между маркерами, создайте компонент Polyline и предоставьте ему массив маркерПозиции в качестве свойства пути:

<Polyline path={markerPositions} />

Поздравляем! Вы успешно реализовали размещение маркеров и рисование полилиний с помощью React Google Maps. Не стесняйтесь настраивать стиль и добавлять дополнительные функции в соответствии с вашими требованиями.