Esegui la migrazione alla classe Route

Sviluppatori dello Spazio economico europeo (SEE)

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

Servizio Directions (legacy) e classe Route

Parametri di richiesta

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

Directions Service (Legacy) Route
Metodo DirectionsService.route() Metodo Route.computeRoutes()

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 mette a confronto i metodi principali del servizio Directions precedente e della classe Route.

Directions Service (Legacy) Route
Metodo route() Metodo computeRoutes()
Metodo DirectionsRenderer.setDirections() Metodo createPolylines(), metodo createWaypointAdvancedMarkers()

Confronto del codice

Questa sezione mette a confronto due porzioni 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 rispettiva API per effettuare una richiesta di indicazioni stradali e poi utilizzare il risultato per disegnare una polilinea e degli indicatori sulla mappa.

Nel servizio Directions precedente, l'oggetto DirectionsRenderer viene utilizzato per visualizzare polilinee e indicatori 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 precedente e la nuova classe Route e fornisce alcuni codici per il confronto.

Trova indicazioni stradali

Servizio Directions (legacy)

Il seguente codice ottiene le indicazioni stradali utilizzando il servizio Directions precedente, quindi utilizza DirectionsRenderer per disegnare una polilinea e degli indicatori 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 di 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 metodo createWaypointAdvancedMarkers per disegnare gli indicatori sulla mappa.

La nuova classe Route non esegue automaticamente il rendering degli indicatori. Devi chiamare createWaypointAdvancedMarkers per eseguire il rendering degli indicatori.

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