Migrar para a classe Route

Desenvolvedores do Espaço Econômico Europeu (EEE)

A nova biblioteca Routes da API Maps JavaScript inclui a classe Route, que substitui o serviço Directions legado. Esta página explica as diferenças entre o serviço de rotas legado e a nova classe Route e fornece alguns códigos para comparação.

Serviço Directions (legado) x classe Route (Beta)

Parâmetros de solicitação

A tabela a seguir compara os parâmetros de solicitação do serviço Directions legado e da classe Route.

Serviço Directions (legado) Route (Beta)
Método DirectionsService.route() Método Route.computeRoutes()

Parâmetros obrigatórios
origin origin
destination destination
travelMode travelMode (opcional)

Parâmetros opcionais
optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerries, avoidHighways, avoidTolls routeModifiers
drivingOptions departureTime, trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

Comparação de métodos

A tabela a seguir compara os principais métodos do serviço Directions legados e da classe Route.

Serviço Directions (legado) Route (Beta)
Método route() Método computeRoutes()
Método DirectionsRenderer.setDirections() método createPolylines(), método createWaypointAdvancedMarkers()

Comparação de código

Esta seção compara dois trechos de código semelhantes para ilustrar as diferenças entre o serviço Directions legado e a nova classe Route. Os snippets de código mostram o código necessário em cada API para fazer uma solicitação de rotas e usar o resultado para desenhar uma polilinha e marcadores no mapa.

No serviço Directions legado, o objeto DirectionsRenderer é usado para mostrar polilinhas e marcadores que representam os resultados de rotas em um mapa. Na biblioteca Routes, o objeto DirectionsRenderer foi substituído pelos métodos createPolylines() e createWaypointAdvancedMarkers(). Nesta página, explicamos as diferenças entre o serviço Directions legado e a nova classe Route, além de fornecer alguns códigos para comparação.

Como chegar

Serviço Directions (legado)

O código a seguir recebe rotas de carro usando o serviço Directions legado e usa o DirectionsRenderer para desenhar uma polilinha e marcadores no mapa: 

// 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.
  }
});

Classe de rota (Beta)

O código a seguir recebe rotas de carro usando a nova classe Route e, em seguida, usa o método createPolylines para desenhar uma polilinha no mapa e o método createWaypointAdvancedMarkers para desenhar marcadores no mapa.

A nova classe Route não renderiza marcadores automaticamente. Você precisa chamar createWaypointAdvancedMarkers para renderizar marcadores.

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

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, 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