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. Nesta página, explicamos as diferenças entre o serviço de rotas legado e a nova classe Route e mostramos alguns códigos para comparação.

Serviço Directions (legado) x classe Route

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
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 legado e da classe Route.

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

Comparação de código

Nesta seção, comparamos dois códigos 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 exibir polilinhas e marcadores que representam resultados direcionais 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 Directions Service legado e a nova classe Route, além de fornecer um código 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, em seguida, 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

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. Chame createWaypointAdvancedMarkers para renderizar marcadores.

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