Route 클래스로 이전

새 Routes 라이브러리, Maps JavaScript API에는 기존 경로 서비스를 대체하는 Route 클래스가 포함되어 있습니다. 이 페이지에서는 기존 경로 서비스와 새로운 Route 클래스의 차이점을 설명하고 비교를 위한 코드를 제공합니다.

경로 서비스 (기존)와 Route 클래스 (베타) 비교

요청 매개변수

다음 표에서는 기존 Directions 서비스와 Route 클래스의 요청 매개변수를 비교합니다.

경로 서비스 (기존) Route (베타)
DirectionsService.route() 메서드 Route.computeRoutes() 메서드

필수 매개변수
origin origin
destination destination
travelMode travelMode (선택사항)

선택적 매개변수
optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerries, avoidHighways, avoidTolls routeModifiers
drivingOptions departureTime, trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

방법 비교

다음 표에서는 기존 Directions 서비스와 Route 클래스의 주요 메서드를 비교합니다.

경로 서비스 (기존) Route (베타)
route() 메서드 computeRoutes() 메서드
DirectionsRenderer.setDirections() 메서드 createPolylines() 메서드, createWaypointAdvancedMarkers() 메서드

코드 비교

이 섹션에서는 유사한 두 코드 조각을 비교하여 기존 Directions 서비스와 새로운 Route 클래스 간의 차이점을 설명합니다. 코드 스니펫은 각 API에서 경로 요청을 만드는 데 필요한 코드를 보여주고, 결과를 사용하여 지도에 폴리라인과 마커를 그립니다.

기존 경로 서비스에서는 DirectionsRenderer 객체를 사용하여 지도에 경로 결과를 나타내는 다중선과 마커를 표시합니다. Routes 라이브러리에서 DirectionsRenderer 객체가 createPolylines() 및 createWaypointAdvancedMarkers() 메서드로 대체되었습니다. 이 페이지에서는 기존 Directions Service와 새로운 Route 클래스의 차이점을 설명하고 비교를 위한 코드를 제공합니다.

운전경로 검색

경로 서비스 (기존)

다음 코드는 기존 Directions 서비스를 사용하여 운전 경로를 가져온 다음 DirectionsRenderer를 사용하여 지도에 폴리라인과 마커를 그립니다. 

// Define a simple request.
var request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING'
};
// Call the Directions Service to get the directions.
directionsService.route(request, function(result, status) {
  if (status == 'OK') {
    directionsRenderer.setDirections(result); // Add polyline and markers to the map.
  }
});

경로 클래스 (베타)

다음 코드는 새 Route 클래스를 사용하여 운전 경로를 가져온 다음 createPolylines 메서드를 사용하여 지도에 다중선을 그리고 createWaypointAdvancedMarkers 메서드를 사용하여 지도에 마커를 그립니다.

새 Route 클래스는 마커를 자동으로 렌더링하지 않습니다. 마커를 렌더링하려면 createWaypointAdvancedMarkers를 호출해야 합니다.

TypeScript

// Define a routes request.
const request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING',
  fields: ['path'], // Request fields needed to draw polylines.
};

// Call computeRoutes to get the directions.
const {routes, fallbackInfo, geocodingResults} = await Route.computeRoutes(request);

// Use createPolylines to create polylines for the route.
mapPolylines = routes[0].createPolylines();
// Add polylines to the map.
mapPolylines.forEach((polyline) => polyline.setMap(map));

// Create markers to start and end points.
const markers = await routes[0].createWaypointAdvancedMarkers();
// Add markers to the map
markers.forEach((marker) => marker.setMap(map));
index.ts

자바스크립트

// Define a routes request.
const request = {
    origin: 'Mountain View, CA',
    destination: 'San Francisco, CA',
    travelMode: 'DRIVING',
    fields: ['path'], // Request fields needed to draw polylines.
};
// Call computeRoutes to get the directions.
const { routes, fallbackInfo, geocodingResults } = await Route.computeRoutes(request);
// Use createPolylines to create polylines for the route.
mapPolylines = routes[0].createPolylines();
// Add polylines to the map.
mapPolylines.forEach((polyline) => polyline.setMap(map));
// Create markers to start and end points.
const markers = await routes[0].createWaypointAdvancedMarkers();
// Add markers to the map
markers.forEach((marker) => marker.setMap(map));
index.js