Bermigrasi ke class Rute

Developer Wilayah Ekonomi Eropa (EEA)

Routes Library baru, Maps JavaScript API menyertakan class Route, yang menggantikan Directions Service lama. Halaman ini menjelaskan perbedaan antara layanan directions lama dan class Routebaru, serta menyediakan beberapa kode untuk perbandingan.

Layanan directions (Lama) versus class Route

Parameter permintaan

Tabel berikut membandingkan parameter permintaan untuk layanan Directions lama dan Route class.

Layanan Directions (Lama) Route
DirectionsService.route() metode Route.computeRoutes() metode

Parameter Wajib
origin origin
destination destination
travelMode travelMode (opsional)

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

Perbandingan metode

Tabel berikut membandingkan metode utama untuk layanan Directions lama dan class Route.

Layanan Directions (Lama) Route
Metode route() Metode computeRoutes()
DirectionsRenderer.setDirections() metode createPolylines() metode, createWaypointAdvancedMarkers() metode

Perbandingan kode

Bagian ini membandingkan dua bagian kode yang serupa untuk mengilustrasikan perbedaan antara layanan Directions lama dan class baru Route. Cuplikan kode menunjukkan kode yang diperlukan di setiap API masing-masing untuk membuat permintaan directions, lalu menggunakan hasilnya untuk menggambar polyline dan penanda di peta.

Di layanan Directions lama, objek DirectionsRenderer digunakan untuk menampilkan polyline dan penanda guna mewakili hasil directions di peta. Di Routes Library, objek DirectionsRenderer telah di ganti dengan metode createPolylines() dan createWaypointAdvancedMarkers(). Halaman ini menjelaskan perbedaan antara Directions Service lama dan class Route baru, serta menyediakan beberapa kode untuk perbandingan.

Lihat rute mobil

Layanan Directions (Lama)

Kode berikut mendapatkan rute mobil menggunakan layanan Directions lama, lalu menggunakan DirectionsRenderer untuk menggambar polyline dan penanda di peta: 

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

Class rute

Kode berikut mendapatkan rute mobil menggunakan class Route baru, lalu menggunakan metode createPolylines untuk menggambar polyline di peta, dan createWaypointAdvancedMarkers untuk menggambar penanda di peta.

Class Route baru tidak otomatis merender penanda. Anda harus memanggil createWaypointAdvancedMarkers untuk merender penanda.

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