Zur Route-Klasse migrieren

Entwickler im Europäischen Wirtschaftsraum (EWR)

Die neue Routes Library der Maps JavaScript API enthält die Route Klasse, die den Legacy-Dienst „Directions“ ersetzt. Auf dieser Seite werden die Unterschiede zwischen dem Legacy-Dienst „Directions“ und der neuen Route Klasse erläutert und einige Codebeispiele zum Vergleich bereitgestellt.

Dienst „Directions“ (Legacy) im Vergleich zur Klasse „Route“

Anfrageparameter

In der folgenden Tabelle werden die Anfrageparameter für den Legacy-Dienst „Directions“ und die Route Klasse verglichen.

Dienst „Directions“ (Legacy) Route
DirectionsService.route() Methode Route.computeRoutes() Methode

Erforderliche Parameter
origin origin
destination destination
travelMode travelMode (optional)

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

Vergleich der Methoden

In der folgenden Tabelle werden die wichtigsten Methoden für den Legacy-Dienst „Directions“ und die Route Klasse verglichen.

Dienst „Directions“ (Legacy) Route
route() Methode computeRoutes()-Methode
DirectionsRenderer.setDirections() Methode Methode createPolylines(), Methode createWaypointAdvancedMarkers()

Codevergleich

In diesem Abschnitt werden zwei ähnliche Codebeispiele verglichen, um die Unterschiede zwischen dem Legacy-Dienst „Directions“ und der neuen Route Klasse zu veranschaulichen. Die Code-Snippets zeigen den Code der für die jeweilige API erforderlich ist, um eine Routenanfrage zu stellen und dann das Ergebnis zu verwenden, um eine Polylinie und Markierungen auf der Karte zu zeichnen.

Im Legacy-Dienst „Directions“ werden mit dem DirectionsRenderer Objekt Polylinien und Markierungen angezeigt, um die Routenergebnisse auf einer Karte darzustellen. In der Routes Library wurde das DirectionsRenderer Objekt durch die createPolylines() und createWaypointAdvancedMarkers() Methoden ersetzt. Auf dieser Seite werden die Unterschiede zwischen dem Legacy-Dienst „Directions“ und der neuen Route Klasse erläutert und einige Codebeispiele zum Vergleich bereitgestellt.

Wegbeschreibung abrufen

Dienst „Directions“ (Legacy)

Mit dem folgenden Code wird eine Wegbeschreibung mit dem Legacy-Dienst „Directions“ berechnet und dann mit dem DirectionsRenderer eine Polylinie und Markierungen auf der Karte gezeichnet: 

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

Klasse „Route“

Mit dem folgenden Code wird eine Wegbeschreibung mit der neuen Klasse „Route“ abgerufen. Anschließend wird mit der Methode createPolylines eine Polylinie auf der Karte gezeichnet und mit der Methode createWaypointAdvancedMarkers Markierungen auf der Karte gezeichnet.

Mit der neuen Klasse Route werden Markierungen nicht automatisch gerendert. Sie müssen createWaypointAdvancedMarkers aufrufen, um Markierungen zu rendern.

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