Migracja do klasy Route

Nowa biblioteka tras w interfejsie Maps JavaScript API zawiera klasę Route, która zastępuje starszą usługę wyznaczania trasy. Na tej stronie znajdziesz opis różnic między starszą usługą wyznaczania trasy a nową klasą Route oraz przykłady kodu do porównania.

Usługa Directions (starsza wersja) a klasa Route (beta)

Parametry żądania

W tabeli poniżej porównano parametry żądania w przypadku starszej wersji usługi Kierunki i klasy Route.

Usługa wyznaczania trasy (starsza wersja) Route (Beta)
Metoda DirectionsService.route() Metoda Route.computeRoutes()

Wymagane parametry
origin origin
destination destination
travelMode travelMode (opcjonalnie)

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

Porównanie metod

W tabeli poniżej porównaliśmy najważniejsze metody starszej usługi Kierunki i klasy Route.

Usługa wyznaczania trasy (starsza wersja) Route (Beta)
Metoda route() Metoda computeRoutes()
Metoda DirectionsRenderer.setDirections() createPolylines() method, createWaypointAdvancedMarkers() method

Porównanie kodu

W tej sekcji porównujemy 2 podobne fragmenty kodu, aby zilustrować różnice między starszą usługą Kierunki a nową klasą Route. Fragmenty kodu pokazują kod wymagany w poszczególnych interfejsach API do wysłania żądania dotyczącego wskazówek dojazdu, a następnie wykorzystują wynik do narysowania na mapie linii łamanej i znaczników.

W starszej wersji usługi Trasy obiekt DirectionsRenderer służy do wyświetlania linii łamanych i znaczników reprezentujących wyniki wyznaczania trasy na mapie. W bibliotece Routes obiekt DirectionsRenderer został zastąpiony metodami createPolylines() i createWaypointAdvancedMarkers(). Na tej stronie znajdziesz wyjaśnienie różnic między starszą usługą Directions Service a nową klasą Route oraz przykłady kodu do porównania.

Pokaż trasę dojazdu

Usługa wyznaczania trasy (starsza wersja)

Poniższy kod pobiera wskazówki dojazdu za pomocą starszej wersji usługi Kierunki, a następnie używa elementu DirectionsRenderer do narysowania na mapie linii łamanej i markerów: 

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

Klasa trasy (beta)

Poniższy kod pobiera wskazówki dojazdu za pomocą nowej klasy Route, a następnie używa metody createPolylines do narysowania linii łamanej na mapie i metody createWaypointAdvancedMarkers do narysowania na niej markerów.

Nowa klasa Route nie renderuje automatycznie znaczników. Aby renderować znaczniki, musisz wywołać funkcję createWaypointAdvancedMarkers.

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