Esegui la migrazione alla classe Route

Sviluppatori dello Spazio economico europeo (SEE)

La nuova libreria Routes dell'API Maps JavaScript include la Route classe, che sostituisce il servizio Directions legacy. Questa pagina spiega le differenze tra il servizio Directions legacy e la nuova Route classe e fornisce alcuni codici per il confronto.

Servizio Directions (legacy) rispetto alla classe Route

Parametri di richiesta

La tabella seguente confronta i parametri di richiesta per il servizio Directions legacy e la Route classe.

Servizio Directions (legacy) Route
DirectionsService.route() metodo Route.computeRoutes() metodo

Parametri obbligatori
origin origin
destination destination
travelMode travelMode (facoltativo)

Parametri facoltativi
optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerries, avoidHighways, avoidTolls routeModifiers
drivingOptions departureTime, trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

Confronto dei metodi

La tabella seguente confronta i metodi chiave per il servizio Directions legacy e la Route classe.

Servizio Directions (legacy) Route
route() metodo Metodo computeRoutes()
DirectionsRenderer.setDirections() metodo createPolylines() metodo, createWaypointAdvancedMarkers() metodo

Confronto del codice

Questa sezione confronta due blocchi di codice simili per illustrare le differenze tra il servizio Directions legacy e la nuova classe Route. Gli snippet di codice mostrano il codice richiesto su ogni API rispettiva per effettuare una richiesta di indicazioni stradali e quindi utilizzare il risultato per disegnare una polilinea e dei segnaposto sulla mappa.

Nel servizio Directions legacy, l' DirectionsRenderer oggetto viene utilizzato per visualizzare polilinee e segnaposto per rappresentare i risultati delle indicazioni stradali su una mappa. Nella libreria Routes, l'oggetto DirectionsRenderer è stato sostituito dai metodi createPolylines() e createWaypointAdvancedMarkers(). Questa pagina spiega le differenze tra il servizio Directions legacy e la nuova Route classe e fornisce alcuni codici per il confronto.

Trova indicazioni stradali

Servizio Directions (legacy)

Il seguente codice ottiene le indicazioni stradali utilizzando il servizio Directions legacy, quindi utilizza il DirectionsRenderer per disegnare una polilinea e i segnaposto sulla mappa: 

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

Il seguente codice ottiene le indicazioni stradali utilizzando la nuova classe Route, quindi utilizza il metodo createPolylines per disegnare una polilinea sulla mappa e il createWaypointAdvancedMarkers per disegnare i segnaposto sulla mappa.

La nuova classe Route non esegue automaticamente il rendering dei segnaposto. Devi chiamare createWaypointAdvancedMarkers per eseguire il rendering dei segnaposto.

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