Esegui la migrazione alla classe Route

Sviluppatori dello Spazio economico europeo (SEE)

La nuova libreria Routes dell'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 del codice 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.

Servizio Indicazioni stradali (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 confronta i metodi chiave per il servizio Directions legacy e la classe Route.

Servizio Indicazioni stradali (legacy) Route
Metodo route() Metodo computeRoutes()
Metodo DirectionsRenderer.setDirections() Metodo createPolylines(), Metodo createWaypointAdvancedMarkers()

Confronto del codice

Questa sezione confronta due frammenti 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 e quindi utilizzare il risultato per disegnare una polilinea e dei marcatori sulla mappa.

Nel servizio Indicazioni stradali 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 legacy e la nuova classe Route e fornisce del codice per il confronto.

Trova indicazioni stradali

Servizio indicazioni (legacy)

Il seguente codice recupera le indicazioni stradali utilizzando il servizio Directions legacy, quindi utilizza DirectionsRenderer per disegnare una polilinea e dei marcatori 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 itinerario

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 i marcatori sulla mappa.

La nuova classe Route non esegue automaticamente il rendering dei marcatori. Devi chiamare createWaypointAdvancedMarkers per visualizzare i marcatori.

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