Migracja do klasy Route

Nowa biblioteka Routes Library w interfejsie Maps JavaScript API zawiera klasę Route, która zastępuje starszą wersję usługi Directions Service. Na tej stronie wyjaśniamy różnice między starszą usługą wskazówek dojazdu a nową klasą Route i podajemy przykładowy kod do porównania.

Usługa Directions (starsza wersja) a klasa Route

Parametry żądania

Tabela poniżej zawiera porównanie parametrów żądania starszej usługi Directions i klasy Route.

Porównanie metod

W tabeli poniżej porównano najważniejsze metody starszej usługi wskazówek dojazdu i klasy Route.

Porównanie kodu

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

W starszej wersji usługi wskazówek dojazdu obiekt DirectionsRenderer służy do wyświetlania linii łamanych i znaczników reprezentujących wyniki wskazówek dojazdu na mapie. W bibliotece Routes obiekt DirectionsRenderer został zastąpiony metodami createPolylines() i createWaypointAdvancedMarkers(). Na tej stronie wyjaśniamy różnice między starszą usługą Directions Service a nową klasą Route i podajemy przykładowy kod do porównania.

Pokaż trasę dojazdu

Directions Service (starsza wersja)

Poniższy kod pobiera wskazówki dojazdu za pomocą starszej wersji usługi wskazówek dojazdu, 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 trasy

Ten 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 znaczników na mapie.

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

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

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