React의 Google Maps API 길찾기 서비스 – 총 거리 및 소요 시간으로 지도에 효율적인 경로를 표시합니다.

사용 사례:

소스 및 대상 주소를 입력할 수 있습니다. 주소 필드의 경우 Google 장소 자동완성이 구현됩니다.

출발지 주소와 목적지 주소 사이에 여러 경유지/정류장을 추가할 수도 있습니다.

주소 필드가 변경되면 지도 및 길찾기 서비스가 초기화되어 운전 방향과 경로를 지도에 표시하고 총 거리와 총 소요 시간을 표시합니다.

최종 데모!

1단계 - Google Maps API 키용 Directions API 활성화

Google Maps API 키를 처음 사용하는 경우 이 키를 살펴보는 것이 좋습니다here .

2단계 — 기본 CRA 시작 및 패키지 설치

npx create-react-app axon
cd axon
npm install @mui/material @emotion/react @emotion/styled

이렇게 하면 기본 CRA가 생성됩니다. UI 구성 요소를 만들기 위해 MUI 5도 설치했습니다.

npm install @react-google-maps/api use-places-autocomplete formik moment

이렇게 하면 필요한 react-google-maps/api 및 use-places-autocomplete 패키지가 설치됩니다.

3단계 - 지도 자바스크립트 라이브러리 포함
public/index.html에 Google 지도 클라이언트측 라이브러리 포함

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key [YOUR_API_KEY]&libraries=places"></script>

4단계 — App.js 설정

주소 필드의 빈 초기 값으로 Formik을 초기화하십시오. Formik은 가장 인기 있는 React용 오픈 소스 양식 라이브러리입니다.

5단계 - 여러 경유지가 있는 출발지 및 목적지 주소 필드 생성

사용된 GoogleAutocomplete 필드는 맞춤 Google 장소 자동완성입니다. 찾을 수 있습니다here.

9행에서 DirectionsService 개체의 인스턴스가 생성됩니다.

13행에서 호출된 route()는 경로 요청 JavaScript 객체(필수 쿼리 매개변수origin , destination 및 travelMode 포함)를 인수로 사용합니다. 또한 waypoints 매개 변수가 포함되어 출발지와 목적지 사이의 모든 정류장을 고려합니다.

응답 콜백 함수인 route() 메서드의 두 번째 인수는 directionsResult 및 directionsStatus를 반환합니다.

행복한 학습! 이 기사에 박수를 치고 더 많은 최신 기사를 보려면 팔로우하세요!

React의 Google Maps API 길찾기 서비스 – 총 거리 및 소요 시간으로 지도에 효율적인 경로를 표시합니다.

Reference

좋은 웹페이지 즐겨찾기