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

Nhà phát triển ở Khu vực kinh tế Châu Âu (EEA)

Thư viện Routes mới, API JavaScript của Maps bao gồm lớp Route, thay thế cho 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 Tuyến đường

Các tham số trong 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
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ố tuỳ chọn
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 thức

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
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 hai đoạn mã tương tự nhau để 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 hình nhiều đường và các điểm đánh dấu trên bản đồ.

Trong dịch vụ Chỉ đường cũ, đối tượng DirectionsRenderer được dùng để hiển thị các đường đa tuyến 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 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.

Xem đường lái xe

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

Mã sau đây lấy đường lái xe bằng dịch vụ Chỉ đường cũ, sau đó sử dụng DirectionsRenderer để vẽ một hình nhiều đường 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.
  }
});

Hạng tuyến đường

Mã sau đây lấy đường lái xe bằng lớp Route mới, sau đó sử dụng phương thức createPolylines để vẽ một hình nhiều đường trên bản đồ và phương thức createWaypointAdvancedMarkers để vẽ điểm đánh dấu trên bản đồ.

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

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