Освоение карт в React: подробное руководство по использованию @react-google-maps/api

Интеграция карт в современные веб-приложения стала важным аспектом создания привлекательного пользовательского опыта с учетом местоположения. С появлением React и таких библиотек, как @react-google-maps/api, разработчики теперь могут легко встраивать интерактивные карты в свои приложения. В этом подробном руководстве мы проведем вас через каждый шаг: от настройки подключения к Google Cloud до использования геолокации для создания потрясающих карт в ваших проектах React.

Часть 1. Настройка подключения к Google Cloud

Чтобы начать, посетите веб-сайт Google Cloud Platform. Новым пользователям следует зарегистрироваться; не беспокойтесь о запросах кредитных карт — уровень бесплатного пользования Google предлагает доступ к таким сервисам, как API Google Maps.
Введите «Активировать полную учетную запись»
Перейдите в меню › Платформа Google Maps › Ключи и учетные данные.
Скопируйте ключ и сохраните

Часть 2. Запуск проекта React и установка зависимостей

Теперь, когда вы получили ключ Google Cloud API, пришло время настроить проект React и интегрировать необходимые библиотеки для создания интерактивных карт с помощью @react-google-maps/api. Чтобы начать работу, выполните следующие действия:
Шаг 1. Создайте новое приложение реагирования:
Если вы еще этого не сделали, убедитесь, что у вас есть Node.js и npm (менеджер пакетов Node). установлен в вашей системе. Откройте терминал и выполните следующую команду, чтобы создать новое приложение React:

npm create vite@latest

Шаг 2. Установите @react-google-maps/api

npm install @react-google-maps/api

Теперь откройте новый компонент для карты и файла CSS.

Шаг 3. Импорт

import { GoogleMap, MarkerF, useLoadScript } from '@react-google-maps/api';
import './google-map.css'

const center = {
  lat: -3.745,
  lng: -38.523
};

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

Часть 3. Отображение вашей первой карты

Шаг 1. Определите функцию Map

Создайте отдельную функцию с именем Map для инкапсуляции логики рендеринга карты. Эта функция будет содержать компонент <GoogleMap> и компонент <MarkerF>.

function Map() {
  return (
    <GoogleMap zoom={16} center={center} mapContainerClassName="map-container">
      <MarkerF
        onClick={() => console.log("my location")}
        position={center}
      />
    </GoogleMap>
  );
}

Шаг 2. Определите функцию GoogleMapExample

Создайте функцию GoogleMapExample, которая будет вашим основным компонентом. Внутри этой функции используйте хук useLoadScript для загрузки API Карт Google. Если API загружен (isLoaded истинно), визуализируйте компонент Map. Если API не загружен, отобразите сообщение о загрузке.

function GoogleMapExample() {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: "YOUR_API_KEY",
  });

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <div>
      <div>
        <Map />
      </div>
    </div>
  );
}

export default GoogleMapExample

Шаг 3. CSS
В файл CSS (например, google-map.css) добавьте следующий код, чтобы определить размер контейнера карты:

.map-container {
  height: 60vh; /* Adjust the height as needed */
}

Не забудьте связать этот CSS-файл в своем HTML или включить его в свой компонент React, если вы используете CSS-in-JS или аналогичный подход.

И теперь ваша карта готова к использованию!

Часть 4: изменение значка маркера:

Улучшение эстетики и визуальной четкости вашей карты включает настройку маркеров в соответствии с темой вашего приложения. В этом сегменте мы покажем вам процесс изменения значка маркера по умолчанию на что-то более привлекательное. Давайте начнем:

Шаг 1. Выберите значок
Перейдите к авторитетному источнику значков, например Icon8 (https://www.icon8.com/), и найдите значок, который резонирует с контекст вашего приложения. Найдя идеальный значок, загрузите его на свой компьютер.

Шаг 2. Добавьте значок в свой проект

В каталоге вашего проекта создайте папку с именем icons или соответствующим именем для организации ваших значков. Переместите загруженный файл значка в эту папку.

Шаг 3: Импортируйте значок

В файл компонента React, где вы используете компонент MarkerF, импортируйте собственный значок. Если ваш файл пользовательского значка называется custom-icon.png и находится в папке icons, импорт будет выглядеть следующим образом:

import customIcon from './icons/custom-icon.png'; // Update the path as needed

Шаг 4. Настройте размер значков

В объекте icon компонента MarkerF вы можете настроить свойство scaledSize, чтобы установить желаемый размер вашего пользовательского значка.

 <MarkerF
        onClick={() => console.log("my location")}
        position={center}
        icon={{
          url: customIcon,
          scaledSize: new window.google.maps.Size(30, 30) // Adjust the size as needed
        }}
      />

Часть 5. Динамическое центрирование карты с помощью геолокации

Включение динамического центрирования карты в зависимости от местоположения пользователя придает вашему приложению персонализированный вид. В этом разделе мы покажем вам реализацию функции динамического центрирования с помощью API геолокации. Давайте углубимся:

Шаг 1. Импортируйте зависимости и настройте состояние

Сначала импортируйте необходимые зависимости для управления состоянием и побочными эффектами. Добавьте следующие строки в начало файла компонента:

import React, { useState, useEffect } from 'react';

Затем настройте переменную состояния для хранения координат динамического центра. В вашем компоненте Map инициализируйте состояние center с помощью хука useState:

function Map() {
  const [center, setCenter] = useState({
    lat: -3.745,
    lng: -38.523
  });

  // Rest of your Map component code...
}

Не забудьте удалить предыдущий center

Шаг 2. Реализуйте логику геолокации

Внутри компонента Map добавьте перехватчик useEffect, чтобы получить текущую геолокацию пользователя и соответствующим образом обновить состояние center. Поместите этот код сразу после строки const [center, setCenter] = useState(...):

useEffect(() => {
  const options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0,
  };

  function success(pos) {
    const crd = pos.coords;
    const coords = {
      lat: crd.latitude,
      lng: crd.longitude,
    };
    setCenter(coords);
  }

  function error(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }

  navigator.geolocation.getCurrentPosition(success, error, options);
}, []);

Краткое содержание:

Благодарим вас за изучение этого примера интерактивной карты! Полный код можно найти на GitHub — нажмите здесь.

Если у вас есть какие-либо вопросы или вам нужна помощь, не стесняйтесь обращаться ко мне в LinkedIn. Я здесь, чтобы помочь и обсудить любые аспекты этого примера.

Приятного кодирования!