Migrer vers la classe Route

Développeurs de l'Espace économique européen (EEE)

La nouvelle bibliothèque Routes de l'API Maps JavaScript inclut la classe Route, qui remplace l' ancien service Directions. Cette page explique les différences entre l'ancien service Directions et la nouvelle Route classe, et fournit du code à des fins de comparaison.

Comparaison entre l'ancien service Directions et la classe Route

Paramètres de requête

Le tableau suivant compare les paramètres de requête de l'ancien service Directions et de la Route classe.

Ancien service Directions Route
DirectionsService.route() méthode Route.computeRoutes() méthode

Paramètres obligatoires
origin origin
destination destination
travelMode travelMode (facultatif)

Paramètres facultatifs
optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerries, avoidHighways, avoidTolls routeModifiers
drivingOptions departureTime, trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

Comparaison des méthodes

Le tableau suivant compare les méthodes clés de l'ancien service Directions et de la Route classe.

Ancien service Directions Route
route() méthode Méthode computeRoutes()
DirectionsRenderer.setDirections() méthode createPolylines() méthode, createWaypointAdvancedMarkers() méthode

Comparaison de code

Cette section compare deux extraits de code similaires pour illustrer les différences entre l' ancien service Directions et la nouvelle Route classe. Les extraits de code montrent le code requis sur chaque API respective pour effectuer une requête d'itinéraire, puis utilisent le résultat pour dessiner une polyligne et des repères sur la carte.

Dans l'ancien service Directions, l' DirectionsRenderer objet est utilisé pour afficher des polylignes et des repères afin de représenter les résultats d'itinéraire sur une carte. Dans la bibliothèque Routes, l'objet DirectionsRenderer a été remplacé par les méthodes createPolylines() et createWaypointAdvancedMarkers(). Cette page explique les différences entre l'ancien service Directions et la nouvelle Route classe, et fournit du code à des fins de comparaison.

Calculer des itinéraires

Ancien service Directions

Le code suivant obtient des itinéraires à l'aide de l'ancien service Directions, puis utilise le DirectionsRenderer pour dessiner une polyligne et des repères sur la carte : 

// 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 Route

Le code suivant obtient des itinéraires à l'aide de la nouvelle classe Route, puis utilise la méthode createPolylines pour dessiner une polyligne sur la carte et la méthode createWaypointAdvancedMarkers pour dessiner des repères sur la carte.

La nouvelle classe Route n'affiche pas automatiquement les repères. Vous devez appeler createWaypointAdvancedMarkers pour afficher les repères.

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