Migracja do klasy Route

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Nowa biblioteka tras Maps JavaScript API zawiera klasę Route, która zastępuje starszą wersję usługi wyznaczania trasy. Na tej stronie opisujemy różnice między starszą wersją usługi wyznaczania trasy a nową Route klasą oraz podajemy przykłady kodu do porównania.

Usługa wyznaczania trasy (starsza wersja) a klasa Route

Parametry żądania

W tabeli poniżej porównujemy parametry żądania w starszej wersji usługi wyznaczania trasy i w Route klasie.

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

Wymagane parametry
origin origin
destination destination
travelMode travelMode (opcjonalny)

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ównujemy najważniejsze metody w starszej wersji usługi wyznaczania trasy i w Route klasie.

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

Porównanie kodu

W tej sekcji porównujemy 2 podobne fragmenty kodu, aby zilustrować różnice między starszą wersją usługi wyznaczania trasy a nową klasą Route. Fragmenty kodu pokazują kod wymagany w każdym interfejsie API do wysłania żądania wyznaczenia trasy, a następnie użycia wyniku do narysowania linii łamanej i znaczników na mapie.

W starszej wersji usługi wyznaczania trasy do wyświetlania linii łamanych i znaczników reprezentujących wyniki wyznaczania trasy na mapie używany jest DirectionsRenderer obiekt. W bibliotece tras obiekt DirectionsRenderer został zastąpiony metodami createPolylines() i createWaypointAdvancedMarkers(). Na tej stronie opisujemy różnice między starszą wersją usługi wyznaczania trasy a nową Route klasą oraz podajemy przykłady kodu do porównania.

Pokaż wskazówki dojazdu

Usługa wyznaczania trasy (starsza wersja)

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

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

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 oraz metody createWaypointAdvancedMarkers do narysowania znaczników na mapie.

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

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