Morioh
Login
Alexander Karachunov

Alexander Karachunov

7 months ago

Как анимировать маркер маршрута на картах Google в React

Маркеры маршрута на Картах Google — это небольшие значки или символы, расположенные вдоль маршрута для обозначения определенных мест или достопримечательностей. Они служат визуальными подсказками, помогающими пользователям ориентироваться и понимать маршрут.

В этом уроке мы научимся анимировать маркер местоположения на картах маршрутов Google в React js. Вы можете выполнить следующие шаги, чтобы понять функциональность анимации маркеров маршрута Google.

Оглавление

  • Шаг 1: Настройка проекта React
  • Шаг 2. Установите пакет Google Maps
  • Шаг 3: Создайте новый компонент
  • Шаг 4. Анимация маршрута Google в React
  • Шаг 5: Обновите файл App.js
  • Шаг 6: Запустите сервер разработки
     

Шаг 1. Настройка проекта React

На первом этапе вам нужно будет использовать данную команду для установки новой платформы React.

Избегайте этого шага, если проект уже создан.

npx create-react-app my-react-app

Заходим в папку приложения.

cd my-react-app

Шаг 2. Установите пакет Google Maps.

@googlemaps/js-api-loader – это удобная библиотека JavaScript, которая предлагает простой способ динамической загрузки API JavaScript Карт Google. .

Эта библиотека опубликована как пакет npm и может быть установлена ​​с помощью команды npm:

npm i @googlemaps/js-api-loader --legacy-peer-deps

–legacy-peer-deps — это параметр, который можно передать команде npm при установке пакетов.

Установка Bootstrap через менеджер пакетов npm позволяет достаточно комфортно управлять проектом.

npm i bootstrap

Шаг 3. Создайте новый компонент

Теперь создайте новую папку comComponents/. Затем создайте файл MapRoute.js и добавьте приведенный ниже код в файл comComponents/MapRoute.js.

import React from 'react'
function MapRoute() {
  return (
    <div></div>
  )
}
export default MapRoute

Шаг 4. Анимируйте маршрут Google в React

Обновите файл comComponents/MapRoute.js, используя приведенный ниже код.

import React, { useState, useRef, useEffect } from "react";
const MapRoute = () => {
  const mapRouteRef = useRef(null);
  const [routeMap, setRouteMap] = useState(null);
  useEffect(() => {
    const googleMap = evokeGMap();
    setRouteMap(googleMap);
  }, []);
  useEffect(() => {
    if (!routeMap) return;
    const routeMapOptions = new window.google.maps.Polyline({
      strokeOpacity: 0,
      icons: [
        {
          icon: {
            path: "M 0,-0.2 0,0.2",
            strokeOpacity: 0.9,
            strokeColor: "red",
            scale: 4,
          },
          offset: "0",
          repeat: "12px",
        },
      ],
    });
    const mapDirService = new window.google.maps.DirectionsService();
    const mapDirRenderer = new window.google.maps.DirectionsRenderer({
      polylineOptions: routeMapOptions,
    });
    const routeHeight = new window.google.maps.LatLng(35.1234126, -111.3345235);
    const beachPoint = new window.google.maps.LatLng(
      35.6543201223223,
      -111.42119253516212,
    );
    const rotueReq = {
      origin: routeHeight,
      destination: beachPoint,
      travelMode: "WALKING",
    };
    mapDirService.route(rotueReq, function (response, status) {
      if (status == "OK") {
        mapDirRenderer.setDirections(response);
        mapDirRenderer.setRouteMap(routeMap);
        moveRouteMarker(routeMap, response.routes[0].overview_path);
      }
    });
  }, [routeMap]);
  const evokeGMap = () => {
    return new window.google.maps.Map(mapRouteRef.current, {
      center: new window.google.maps.LatLng(45.5543234, -131.5643268),
      zoom: 13,
    });
  };
  const moveRouteMarker = async (map, routeCoord) => {
    const marker = new window.google.maps.Marker({
      position: routeCoord[0],
      routeMap,
      icon: {
        url: "https://ibb.co/s1KrjvN",
        scaledSize: new window.google.maps.Size(35, 35),
      },
      zIndex: 99,
      optimized: false,
    });
    for (let i = 0; i < routeCoord.length; i++) {
      await animateMarker(marker, marker.getPosition(), routeCoord[i], 0.06);
    }
  };
  const animateMarker = async (marker, moveFrom, moveTo, t, delta = 100) => {
    return new Promise((resolve) => {
      const routeLat = (moveTo.lat() - moveFrom.lat()) / delta;
      const routeLong = (moveTo.lng() - moveFrom.lng()) / delta;
      let delay = 12 * t,
        count = 0;
      for (let i = 0; i < delta; i++) {
        (function (data) {
          setTimeout(function () {
            let lat = marker.position.lat();
            let lng = marker.position.lng();
            lat += routeLat;
            lng += routeLong;
            marker.setPosition(new window.google.maps.LatLng(lat, lng));
            count++;
            if (count === delta) {
              resolve(marker);
            }
          }, delay * data);
        })(i);
      }
    });
  };
  return <div ref={mapRouteRef} style={{ width: 700, height: 350 }} />;
};
export default MapRoute;

Шаг 5. Обновите файл App.js.

Перейдите в папку src/, найдите и откройте файл App.js и импортируйте компонент MapRoute в этот основной входной файл.< /а>

Убедитесь, что вы определили свой ключ API Google Map, чтобы карта работала безупречно.

import React, { useState, useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import MapRoute from "./components/MapRoute";
import { Loader } from "@googlemaps/js-api-loader";
function App() {
  const [mapLoader, setMapLoader] = useState(false);
  useEffect(() => {
    const options = {
      apiKey: "YOUR_GOOGLE_MAP_API_KEY",
      version: "weekly",
      libraries: ["geometry"],
    };
    new Loader(options)
      .load()
      .then(() => {
        setMapLoader(true);
      })
      .catch((error) => {
        console.error("Something ain't working; try again later.", error);
      });
  }, []);
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Animate Google Map Route Marker Example</h2>
      {!mapLoader ? <div>Loading...</div> : <MapRoute />}
      <p>
        To make the Google map work; add{" "}
        <strong>YOUR_GOOGLE_MAP_API_KEY</strong> in <strong>src/App.js</strong>{" "}
        entry.
      </p>
    </div>
  );
}
export default App;

Шаг 6. Запустите сервер разработки

Теперь мы готовы протестировать только что созданную функцию.

В командной строке скопируйте и вставьте приведенную ниже команду и нажмите Enter.

npm start

После запуска сервера; ваше приложение будет видно в браузере:

http://localhost:3000
1.65 GEEK