Di chuyển sang lớp Tuyến đường

Routes Library mới, Maps JavaScript API bao gồm lớp Route, thay thế Dịch vụ chỉ đường cũ. Trang này giải thích sự khác biệt giữa dịch vụ chỉ đường cũ và lớp Route mới, đồng thời cung cấp một số mã để so sánh.

Dịch vụ chỉ đường (Cũ) so với lớp Đường (Beta)

Tham số yêu cầu

Bảng sau đây so sánh các tham số yêu cầu cho dịch vụ Chỉ đường cũ và lớp Route.

Dịch vụ chỉ đường (Cũ) Route (Thử nghiệm)
Phương thức DirectionsService.route() Phương thức Route.computeRoutes()

Tham số bắt buộc
origin origin
destination destination
travelMode travelMode (không bắt buộc)

Thông số không bắt buộc
optimizeWaypoints optimizeWaypointOrder
provideRouteAlternatives computeAlternativeRoutes
avoidFerries, avoidHighways, avoidTolls routeModifiers
drivingOptions departureTime, trafficModel
region region
transitOptions transitPreference
arrivalTime arrivalTime
unitSystem units
waypoints intermediates

So sánh các phương pháp

Bảng sau đây so sánh các phương thức chính cho dịch vụ Chỉ đường cũ và lớp Route.

Dịch vụ chỉ đường (Cũ) Route (Thử nghiệm)
Phương thức route() Phương thức computeRoutes()
Phương thức DirectionsRenderer.setDirections() Phương thức createPolylines(), Phương thức createWaypointAdvancedMarkers()

So sánh mã

Phần này so sánh 2 đoạn mã tương tự để minh hoạ sự khác biệt giữa dịch vụ Chỉ đường cũ và lớp Route mới. Các đoạn mã cho thấy mã cần thiết trên mỗi API tương ứng để đưa ra yêu cầu chỉ đường, sau đó sử dụng kết quả để vẽ một đường nhiều đoạn và các điểm đánh dấu trên bản đồ.

Trong dịch vụ Directions cũ, đối tượng DirectionsRenderer được dùng để hiển thị nhiều đường và điểm đánh dấu nhằm thể hiện kết quả chỉ đường trên bản đồ. Trong thư viện Tuyến đường, đối tượng DirectionsRenderer đã được thay thế bằng các phương thức createPolylines() và createWaypointAdvancedMarkers(). Trang này giải thích sự khác biệt giữa Directions Service cũ và lớp Route mới, đồng thời cung cấp một số mã để so sánh.

Xem đường lái xe

Dịch vụ chỉ đường (Cũ)

Đoạn mã sau đây lấy chỉ đường lái xe bằng dịch vụ Directions cũ, sau đó dùng DirectionsRenderer để vẽ một đường đa tuyến và các điểm đánh dấu trên bản đồ: 

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

Lớp tuyến đường (Beta)

Đoạn mã sau đây lấy chỉ đường lái xe bằng lớp Route mới, sau đó dùng phương thức createPolylines để vẽ một đường đa tuyến trên bản đồ và phương thức createWaypointAdvancedMarkers để vẽ các điểm đánh dấu trên bản đồ.

Lớp Route mới không tự động hiển thị các điểm đánh dấu. Bạn phải gọi createWaypointAdvancedMarkers để hiển thị các điểm đánh dấu. 

// Define a simple request.
const request = {
  origin: 'Mountain View, CA',
  destination: 'San Francisco, CA',
  travelMode: 'DRIVING',
  fields: ['path', 'legs'], // Request fields needed to draw polylines.
};

// Call computeRoutes to get the directions.
const {routes} = await Route.computeRoutes(request);

// Use createPolylines to create a polyline 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));