Route 클래스로 이전

유럽 경제 지역 (EEA) 개발자

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

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

요청 매개변수

다음 표는 기존 경로 서비스와 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

메서드 비교

다음 표는 기존 경로 서비스와 Route 클래스의 주요 메서드를 비교한 것입니다.

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

코드 비교

이 섹션에서는 기존 경로 서비스와 새 Route 클래스의 차이점을 보여주기 위해 두 개의 유사한 코드를 비교합니다. 코드 스니펫은 경로 요청을 하는 데 필요한 각 API의 코드를 보여준 다음 결과를 사용하여 지도에 다중선과 마커를 그립니다.

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

운전경로 검색

경로 서비스 (기존)

다음 코드는 기존 경로 서비스를 사용하여 운전경로를 가져온 다음 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.
  }
});

경로 클래스

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

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

TypeScript

// Define a routes request.
const request: google.maps.routes.ComputeRoutesRequest = {
    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 } = await Route.computeRoutes(request);

// Use createPolylines to create polylines for the route.
if (!routes) {
    console.warn('No routes found.');
    return;
}
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.map = map;
});

JavaScript

// 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 } = await Route.computeRoutes(request);

// Use createPolylines to create polylines for the route.
if (!routes) {
    console.warn('No routes found.');
    return;
}
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.map = map;
});