Trang này được dịch bởi Cloud Translation API.

Dịch vụ chỉ đường

Lưu ý: Thư viện phía máy chủ

Tổng quan

Bạn có thể tính toán thông tin đường đi (bằng nhiều phương thức di chuyển) bằng cách sử dụng đối tượng DirectionsService. Đối tượng này giao tiếp với Dịch vụ chỉ đường API Google Maps. Dịch vụ này sẽ nhận yêu cầu chỉ đường và trả về một đường dẫn hiệu quả. Thời gian di chuyển là yếu tố chính được tối ưu hoá. Tuy nhiên, chúng tôi cũng có thể xét đến nhiều yếu tố khác như khoảng cách, số lượt đi và nhiều yếu tố khác. Bạn có thể tự xử lý các kết quả chỉ đường này hoặc sử dụng đối tượng DirectionsRenderer để hiển thị các kết quả này.

Khi chỉ định điểm khởi hành hoặc điểm đến trong yêu cầu chỉ đường, bạn có thể chỉ định một chuỗi truy vấn (ví dụ: "Chicago, IL" hoặc "Darwin, NSW, Australia"), giá trị LatLng hoặc đối tượng Place.

Dịch vụ Chỉ đường có thể trả về thông tin chỉ đường nhiều phần bằng một loạt điểm tham chiếu. Thông tin chỉ đường được hiển thị dưới dạng bản vẽ nhiều đường trên bản đồ hoặc bổ sung dưới dạng một loạt nội dung mô tả bằng văn bản trong phần tử <div> (ví dụ: "Rẽ phải vào đường dốc Cầu Williamsburg").

Bắt đầu

Trước khi sử dụng dịch vụ Chỉ đường trong API JavaScript của Maps, trước tiên hãy đảm bảo rằng bạn đã bật API Chỉ đường trong Google Cloud Console, trong cùng một dự án mà bạn thiết lập cho API JavaScript của Maps.

Cách xem danh sách các API đã bật:

Chuyển đến Google Cloud Console.
Nhấp vào nút Select a project (Chọn một dự án), sau đó chọn cùng một dự án mà bạn thiết lập cho API JavaScript của Maps và nhấp vào Open (Mở).
Từ danh sách API trên Trang tổng quan, hãy tìm API chỉ đường.
Nếu thấy API trong danh sách thì bạn đã đặt xong. Nếu API không được liệt kê, hãy bật API đó:
1. Ở đầu trang, hãy chọn ENABLE API (Bật API) để hiển thị thẻ Library. Ngoài ra, trên trình đơn bên trái, hãy chọn Library (Thư viện).
2. Tìm API chỉ đường, rồi chọn API đó từ danh sách kết quả.
3. Chọn BẬT. Khi quá trình hoàn tất, API Chỉ đường sẽ xuất hiện trong danh sách API trên Trang tổng quan.

Giá và chính sách

Giá

Bắt đầu có hiệu lực từ ngày 16 tháng 7 năm 2018, gói thanh toán mới trả tiền sẽ có hiệu lực đối với Maps, Tuyến đường và Địa điểm. Để tìm hiểu thêm về hạn mức sử dụng và giá mới cho việc sử dụng dịch vụ Chỉ đường JavaScript, hãy xem phần Sử dụng và thanh toán cho API Chỉ đường.

Chính sách

Việc sử dụng dịch vụ Chỉ đường phải tuân theo các chính sách được mô tả cho API Chỉ đường.

Yêu cầu chỉ đường

Việc truy cập dịch vụ Chỉ đường không đồng bộ vì API Google Maps cần thực hiện lệnh gọi đến máy chủ bên ngoài. Vì lý do đó, bạn cần chuyển phương thức callback để gọi lại khi hoàn tất yêu cầu. Phương thức gọi lại này sẽ xử lý(các) kết quả. Lưu ý rằng dịch vụ Chỉ đường có thể trả về nhiều hành trình có thể có dưới dạng một mảng routes[] riêng biệt.

Để sử dụng thông tin chỉ đường trong Maps JavaScript API, hãy tạo một đối tượng thuộc loại DirectionsService và gọi DirectionsService.route() để bắt đầu một yêu cầu đến dịch vụ Chỉ đường, truyền đối tượng đó một đối tượng DirectionsRequest chứa ký tự đầu vào và phương thức gọi lại để thực thi khi nhận được phản hồi.

Giá trị cố định đối tượng DirectionsRequest chứa các trường sau:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Các trường này được giải thích bên dưới:

origin (bắt buộc) chỉ định vị trí bắt đầu để tính chỉ đường. Giá trị này có thể được chỉ định dưới dạng String (ví dụ: "Chicago, IL"), dưới dạng giá trị LatLng hoặc dưới dạng đối tượng Place. Nếu sử dụng đối tượng Place (Địa điểm), bạn có thể chỉ định mã địa điểm, một chuỗi truy vấn hoặc một vị trí LatLng. Bạn có thể truy xuất ID địa điểm từ các dịch vụ Mã hóa địa lý, Tìm kiếm địa điểm và Tự động hoàn thành địa điểm trong API JavaScript của Maps. Để biết ví dụ về cách sử dụng mã địa điểm trong tính năng Tự động hoàn thành địa điểm, hãy xem phần Tự động hoàn thành địa điểm và thông tin đường đi.
destination (bắt buộc) chỉ định vị trí kết thúc để tính chỉ đường. Các tuỳ chọn này giống với trường origin được mô tả ở trên.
travelMode (bắt buộc) chỉ định phương thức di chuyển để sử dụng khi tính toán đường đi. Giá trị hợp lệ được chỉ định trong Chế độ đi lại bên dưới.
transitOptions (không bắt buộc) chỉ định giá trị chỉ áp dụng cho các yêu cầu trong đó travelMode là TRANSIT. Giá trị hợp lệ được mô tả trong phần Tùy chọn phương tiện công cộng bên dưới.
drivingOptions (không bắt buộc) chỉ định giá trị chỉ áp dụng cho các yêu cầu trong đó travelMode là DRIVING. Giá trị hợp lệ được mô tả trong phần Tùy chọn lái xe bên dưới.
unitSystem (không bắt buộc) xác định hệ thống sử dụng đơn vị nào khi hiển thị kết quả. Giá trị hợp lệ được chỉ định trong System Systems bên dưới.
waypoints[] (không bắt buộc) chỉ định một mảng DirectionsWaypoint. Điểm tham chiếu thay đổi tuyến đường bằng cách định tuyến tuyến đường đó thông qua(các) vị trí được chỉ định. Một điểm tham chiếu được chỉ định dưới dạng giá trị cố định đối tượng có các trường bên dưới:
- location chỉ định vị trí của điểm tham chiếu, dưới dạng LatLng, dưới dạng đối tượng Place hoặc đối tượng String sẽ được mã hoá địa lý.
- stopover là một giá trị boolean cho biết điểm tham chiếu là một điểm dừng trên tuyến đường có tác dụng chia tuyến đường thành hai tuyến.
(Để biết thêm thông tin về điểm tham chiếu, hãy xem phần Sử dụng Điểm tham chiếu trong Tuyến đường bên dưới.)
optimizeWaypoints (không bắt buộc) chỉ định rằng tuyến sử dụng waypoints được cung cấp có thể được tối ưu hoá bằng cách sắp xếp lại các điểm tham chiếu theo thứ tự hiệu quả hơn. Nếu true, Dịch vụ chỉ đường sẽ trả về waypoints đã được sắp xếp lại trong trường waypoint_order.(Để biết thêm thông tin, hãy xem bài viết Sử dụng Điểm tham chiếu trong Tuyến đường bên dưới.)
provideRouteAlternatives (không bắt buộc) khi được đặt thành true chỉ định rằng dịch vụ Chỉ đường có thể cung cấp nhiều tuyến đường thay thế trong phản hồi. Xin lưu ý rằng việc cung cấp các phương án thay thế cho tuyến đường có thể làm tăng thời gian phản hồi của máy chủ. Điều này chỉ áp dụng cho các yêu cầu không có điểm trung gian.
avoidFerries (không bắt buộc) khi được đặt thành true cho biết tuyến đường đã tính toán nên tránh phà nếu có thể.
avoidHighways (không bắt buộc) khi được đặt thành true cho biết rằng(các) tuyến đường đã tính toán nên tránh các đường cao tốc chính, nếu có thể.
avoidTolls (không bắt buộc) khi được đặt thành true cho biết rằng(các) tuyến đường đã tính toán nên tránh các trạm thu phí, nếu có thể.
region (không bắt buộc) chỉ định mã vùng, được chỉ định dưới dạng một ccTLD ("miền cấp cao nhất") có hai ký tự. (Để biết thêm thông tin, hãy xem phần Xu hướng theo khu vực bên dưới.)

Lưu ý: Trường durationInTraffic hiện đã ngừng hoạt động. Trước đây, đây là cách được đề xuất cho khách hàng sử dụng Gói cao cấp của Nền tảng Google Maps để chỉ định xem kết quả có nên bao gồm thời lượng hay không dựa trên điều kiện giao thông hiện tại. Thay vào đó, bạn nên sử dụng trường drivingOptions.

Dưới đây là mẫu DirectionsRequest:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Phương tiện đi lại

Khi tính toán chỉ đường, bạn cần chỉ định phương tiện đi lại để sử dụng. Hiện chúng tôi hỗ trợ những phương tiện đi lại sau đây:

DRIVING (Mặc định) cho biết hướng lái xe thông thường bằng mạng lưới đường.
BICYCLING yêu cầu chỉ đường đi xe đạp qua đường dành cho xe đạp và các đường phố ưa thích.
TRANSIT yêu cầu chỉ đường thông qua các tuyến đường phương tiện công cộng.
WALKING yêu cầu chỉ đường đi bộ qua đường dành cho người đi bộ và vỉa hè.

Hãy tham khảo Thông tin chi tiết về phạm vi bao phủ của Nền tảng Google Maps để xác định phạm vi một quốc gia hỗ trợ chỉ đường. Nếu bạn yêu cầu chỉ đường đến một khu vực không hỗ trợ loại chỉ đường đó, thì phản hồi sẽ trả về DirectionsStatus="ZERO_RESULTS".

Lưu ý: Thông tin chỉ đường đi bộ có thể không bao gồm đường đi bộ rõ ràng, vì vậy, thông tin chỉ đường đi bộ sẽ trả về cảnh báo trong DirectionsResult. Người dùng phải luôn thấy những cảnh báo này. Nếu không sử dụng DirectionsRenderer mặc định, bạn có trách nhiệm đảm bảo những cảnh báo sẽ xuất hiện.

Tùy chọn phương tiện công cộng

Các tùy chọn có sẵn cho yêu cầu chỉ đường khác nhau giữa các phương tiện đi lại. Khi yêu cầu chỉ đường phương tiện công cộng, các tùy chọn avoidHighways, avoidTolls, waypoints[] và optimizeWaypoints sẽ bị bỏ qua. Bạn có thể chỉ định các tuỳ chọn định tuyến dành riêng cho phương tiện công cộng thông qua giá trị cố định của đối tượng TransitOptions.

Chỉ đường chuyển tuyến có giới hạn thời gian. Thông tin chỉ đường sẽ chỉ được trả về vào thời điểm tương lai.

Giá trị cố định đối tượng TransitOptions chứa các trường sau:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

Các trường này được giải thích bên dưới:

arrivalTime (không bắt buộc) chỉ định thời gian đến dự kiến dưới dạng đối tượng Date. Nếu bạn chỉ định thời gian đến, thì thời gian khởi hành sẽ bị bỏ qua.
departureTime (không bắt buộc) chỉ định thời gian khởi hành theo ý muốn làm đối tượng Date. departureTime sẽ bị bỏ qua nếu bạn chỉ định arrivalTime. Giá trị mặc định là bây giờ (nghĩa là thời gian hiện tại) nếu không có giá trị nào được chỉ định cho departureTime hoặc arrivalTime.
modes[] (không bắt buộc) là một mảng chứa một hoặc nhiều giá trị cố định đối tượng TransitMode. Bạn chỉ có thể bao gồm trường này nếu yêu cầu có khóa API. Mỗi TransitMode chỉ định một phương thức di chuyển ưu tiên. Bạn có thể sử dụng các giá trị sau:
- BUS cho biết tuyến đường được tính toán nên đi bằng xe buýt.
- RAIL cho biết tuyến đường được tính toán nên đi bằng tàu hỏa, xe điện, tàu điện và tàu điện ngầm.
- SUBWAY cho biết tuyến đường đã tính toán nên đi bằng tàu điện ngầm.
- TRAIN cho biết tuyến đường được tính toán nên đi bằng tàu hỏa.
- TRAM cho biết tuyến đường được tính toán nên đi bằng xe điện và xe lửa.
routingPreference (không bắt buộc) chỉ định lựa chọn ưu tiên về phương tiện công cộng. Khi sử dụng tuỳ chọn này, bạn có thể phân bổ cho các tuỳ chọn được trả về thay vì chấp nhận tuyến tốt nhất mặc định do API chọn. Bạn chỉ có thể chỉ định trường này nếu yêu cầu có chứa khoá API. Bạn có thể sử dụng các giá trị sau:
- FEWER_TRANSFERS cho biết tuyến đã tính toán nên ưu tiên một số lần chuyển.
- LESS_WALKING cho biết tuyến đường được tính toán nên ưu tiên hạn chế đi bộ.

Dưới đây là ví dụ về mẫu DirectionsRequest cho phương tiện công cộng:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Tùy chọn lái xe

Bạn có thể chỉ định các tuỳ chọn định tuyến cho chỉ đường lái xe thông qua đối tượng DrivingOptions.

Đối tượng DrivingOptions chứa các trường sau:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Các trường này được giải thích bên dưới:

departureTime (bắt buộc để đối tượng drivingOptions có giá trị hợp lệ) chỉ định thời gian khởi hành mong muốn dưới dạng một đối tượng Date. Giá trị này phải được đặt ở một thời điểm hiện tại hoặc một thời điểm trong tương lai. Tên này không được trong quá khứ. (API này chuyển đổi tất cả các ngày thành giờ UTC để đảm bảo xử lý nhất quán giữa các múi giờ.) Đối với khách hàng sử dụng Gói cao cấp của Nền tảng Google Maps, nếu bạn bao gồm departureTime trong yêu cầu, API sẽ trả về tuyến đường tốt nhất dựa trên điều kiện giao thông dự kiến tại thời điểm đó và đưa thời gian dự kiến vào lưu lượng truy cập (duration_in_traffic) trong phản hồi. Nếu bạn không chỉ định thời gian khởi hành (tức là nếu yêu cầu không bao gồm drivingOptions), thì tuyến đường được trả lại nhìn chung là tuyến đường tốt mà không tính đến điều kiện giao thông.
trafficModel (không bắt buộc) chỉ định các giả định cần sử dụng khi tính toán thời gian trong lưu lượng truy cập. Chế độ cài đặt này ảnh hưởng đến giá trị được trả về trong trường duration_in_traffic trong phản hồi, có chứa thời gian dự đoán về lưu lượng truy cập dựa trên giá trị trung bình trước đây. Giá trị mặc định là bestguess. Bạn có thể sử dụng các giá trị sau:
- bestguess (mặc định) cho biết rằng duration_in_traffic được trả về sẽ là thời gian ước tính tốt nhất để đi lại dựa trên những gì đã biết về cả điều kiện giao thông trước đây và tình trạng giao thông trực tiếp. Càng gần với departureTime, lưu lượng truy cập trực tiếp càng trở nên quan trọng.
- pessimistic cho biết rằng duration_in_traffic được trả về phải dài hơn thời gian đi lại thực tế trong hầu hết các ngày, mặc dù đôi khi những ngày có điều kiện giao thông đặc biệt kém có thể vượt quá giá trị này.
- optimistic cho biết rằng duration_in_traffic được trả về phải ngắn hơn thời gian đi thực tế trong hầu hết các ngày, mặc dù một số ngày có điều kiện giao thông đặc biệt tốt có thể nhanh hơn giá trị này.

Lưu ý: Để đảm bảo yêu cầu của bạn sử dụng thông tin về lưu lượng truy cập trực tiếp, hãy đặt departureTime thành bây giờ. Các yêu cầu sử dụng thông tin lưu lượng truy cập sẽ được tính phí cao hơn. Tìm hiểu thêm về cách lập hóa đơn cho các sản phẩm của Nền tảng Google Maps.

Dưới đây là mẫu DirectionsRequest cho chỉ đường lái xe:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

Hệ đơn vị

Theo mặc định, thông tin đường đi được tính và hiển thị bằng hệ thống đơn vị của quốc gia hoặc khu vực của nơi xuất phát. (Lưu ý: Nguồn gốc được biểu thị bằng cách sử dụng vĩ độ/kinh độ thay vì địa chỉ luôn mặc định theo đơn vị hệ mét.) Ví dụ: một tuyến đường từ "Chicago, IL" đến "Toronto, ONT" sẽ hiển thị kết quả bằng dặm, trong khi tuyến đường ngược lại sẽ hiển thị kết quả theo km. Bạn có thể ghi đè hệ thống đơn vị này bằng cách đặt một hệ thống rõ ràng trong yêu cầu sử dụng một trong các giá trị UnitSystem sau:

UnitSystem.METRIC chỉ định việc sử dụng hệ thống chỉ số. Khoảng cách được hiển thị bằng km.
UnitSystem.IMPERIAL chỉ định việc sử dụng hệ thống Imperial (tiếng Anh). Khoảng cách được hiển thị bằng dặm.

Lưu ý: Tùy chọn cài đặt hệ thống của đơn vị này chỉ ảnh hưởng đến văn bản hiển thị cho người dùng. Kết quả chỉ đường cũng chứa các giá trị khoảng cách mà người dùng không nhìn thấy được, biểu thị bằng mét.

Xu hướng Khu vực cho Chỉ đường

Dịch vụ chỉ đường API Google Maps trả về các kết quả địa chỉ chịu ảnh hưởng bởi miền (khu vực hoặc quốc gia) mà bạn đã tải phần khởi động JavaScript. (Vì hầu hết người dùng tải https://maps.googleapis.com/, nên việc này sẽ đặt một miền ngầm định thành Hoa Kỳ.) Nếu tải bootstrap từ một miền khác được hỗ trợ, bạn sẽ nhận được kết quả từ miền đó. Ví dụ: nội dung tìm kiếm "San Francisco" có thể trả về kết quả khác với những ứng dụng tải https://maps.googleapis.com/ (Hoa Kỳ) và kết quả tìm kiếm từ http://maps.google.es/ (Tây Ban Nha).

Bạn cũng có thể đặt dịch vụ Chỉ đường để trả về kết quả thiên về một khu vực cụ thể bằng cách sử dụng tham số region. Thông số này sẽ lấy một mã vùng, được chỉ định dưới dạng một thẻ con Unicode gồm hai ký tự (không phải số). Trong hầu hết các trường hợp, những thẻ này sẽ ánh xạ trực tiếp tới các giá trị bao gồm ký tự ccTLD ("miền cấp cao nhất") chẳng hạn như "uk" trong "co.uk". Trong một số trường hợp, thẻ region cũng hỗ trợ các mã ISO-3166-1, đôi khi khác với các giá trị ccTLD (ví dụ: "GB" cho "Vương quốc Anh").

Khi sử dụng tham số region:

Chỉ chỉ định một quốc gia hoặc vùng. Nhiều giá trị bị bỏ qua và có thể dẫn đến yêu cầu không thành công.
Chỉ sử dụng thẻ phụ của vùng gồm hai ký tự (định dạng Unicode CLDR). Nếu bạn nhập những dữ liệu đầu vào khác thì sẽ xảy ra lỗi.

Xu hướng vùng chỉ được hỗ trợ cho các quốc gia và vùng hỗ trợ chỉ đường. Tham khảo Thông tin chi tiết về mức độ phù hợp của nền tảng Google Maps để xem thông tin về phạm vi quốc tế của API Chỉ đường.

Chỉ đường hiển thị

Khi bắt đầu một yêu cầu chỉ đường đến DirectionsService bằng phương thức route(), bạn phải truyền một lệnh gọi lại. Lệnh gọi lại này sẽ được thực thi khi yêu cầu dịch vụ hoàn tất. Lệnh gọi lại này sẽ trả về mã DirectionsResult và mã DirectionsStatus trong phản hồi.

Trạng thái của Truy vấn Chỉ đường

DirectionsStatus có thể trả về các giá trị sau:

OK cho biết phản hồi chứa DirectionsResult hợp lệ.
NOT_FOUND chỉ ra ít nhất một trong những vị trí được chỉ định trong điểm xuất phát, điểm đến hoặc điểm tham chiếu của yêu cầu đó không được mã hóa địa lý.
ZERO_RESULTS cho biết không thể tìm thấy tuyến đường nào giữa điểm khởi hành và điểm đến.
MAX_WAYPOINTS_EXCEEDED cho biết có quá nhiều trường DirectionsWaypoint được cung cấp trong DirectionsRequest. Hãy xem mục dưới đây về các giới hạn đối với điểm tham chiếu.
MAX_ROUTE_LENGTH_EXCEEDED cho biết tuyến đã yêu cầu quá dài và không thể xử lý được. Lỗi này xảy ra khi các hướng dẫn phức tạp hơn được trả về. Hãy thử giảm số điểm tham chiếu, lối rẽ hoặc hướng dẫn.
INVALID_REQUEST cho biết DirectionsRequest đã cung cấp không hợp lệ. Nguyên nhân phổ biến nhất của mã lỗi này là do các yêu cầu thiếu nguồn gốc hoặc đích đến hoặc do một yêu cầu về phương tiện công cộng có chứa điểm tham chiếu.
OVER_QUERY_LIMIT cho biết trang web đã gửi quá nhiều yêu cầu trong khoảng thời gian cho phép.
REQUEST_DENIED cho biết trang web này không được phép sử dụng dịch vụ chỉ đường.
UNKNOWN_ERROR cho biết không thể xử lý yêu cầu chỉ đường do lỗi máy chủ. Yêu cầu có thể thành công nếu bạn thử lại.

Bạn nên đảm bảo rằng truy vấn chỉ đường trả về kết quả hợp lệ bằng cách kiểm tra giá trị này trước khi xử lý kết quả.

Hiển thị Chỉ đường kết quả

DirectionsResult chứa kết quả của truy vấn chỉ đường mà bạn có thể tự xử lý hoặc truyền đến một đối tượng DirectionsRenderer có thể tự động xử lý việc hiển thị kết quả trên bản đồ.

Để hiển thị DirectionsResult bằng DirectionsRenderer, bạn cần làm như sau:

Tạo đối tượng DirectionsRenderer.
Gọi setMap() trên trình kết xuất để liên kết nó với bản đồ đã truyền.
Gọi setDirections() trên trình kết xuất, truyền DirectionsResult vào như đã nêu ở trên. Vì là trình kết xuất MVCObject, nên trình kết xuất sẽ tự động phát hiện mọi thay đổi đối với thuộc tính và cập nhật bản đồ khi chỉ đường liên kết với bản đồ đã thay đổi.

Ví dụ sau đây tính toán thông tin đường đi giữa hai vị trí trên Tuyến đường 66, trong đó điểm khởi hành và điểm đến được đặt bởi các giá trị "start" và "end" nhất định trong danh sách thả xuống. DirectionsRenderer xử lý việc hiển thị đa giác giữa các vị trí được chỉ định và vị trí của các điểm đánh dấu tại điểm bắt đầu, điểm đến và các điểm tham chiếu (nếu có).

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

Trong nội dung HTML:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

Xem ví dụ

Ví dụ sau đây cho thấy thông tin chỉ đường bằng nhiều phương tiện đi lại giữa Haight-Ashbury đến Ocean Beach ở San Francisco, CA:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

Trong nội dung HTML:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

Xem ví dụ

DirectionsRenderer không chỉ xử lý việc hiển thị polyline và bất kỳ điểm đánh dấu liên quan nào, mà còn xử lý việc hiển thị văn bản của thông tin đường đi dưới dạng một loạt các bước. Để thực hiện việc này, hãy gọi setPanel() trên DirectionsRenderer, truyền nó là <div> để hiển thị thông tin này. Việc này cũng đảm bảo rằng bạn hiển thị thông tin thích hợp về bản quyền và mọi cảnh báo có thể liên quan đến kết quả đó.

Bạn sẽ thấy thông tin chỉ đường bằng văn bản bằng cách sử dụng chế độ cài đặt ngôn ngữ bạn muốn dùng của trình duyệt hoặc ngôn ngữ được chỉ định khi tải JavaScript API bằng tham số language. (Để biết thêm thông tin, hãy xem phần Bản địa hoá.) Đối với chỉ đường chuyển tuyến, thời gian sẽ được hiển thị theo múi giờ tại điểm dừng chuyển tuyến đó.

Ví dụ sau giống với ví dụ ở trên, nhưng có bảng điều khiển <div> để hiển thị thông tin chỉ đường:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

Trong nội dung HTML:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

Xem ví dụ

Đối tượng Hướng dẫn kết quả

Khi gửi yêu cầu chỉ đường đến DirectionsService, bạn sẽ nhận được phản hồi bao gồm mã trạng thái và một kết quả là đối tượng DirectionsResult. DirectionsResult là một giá trị cố định đối tượng có các trường sau:

geocoded_waypoints[] chứa một mảng các đối tượng DirectionsGeocodedWaypoint, mỗi đối tượng chứa thông tin chi tiết về mã hoá địa lý gốc, điểm đến và điểm tham chiếu.
routes[] chứa một mảng các đối tượng DirectionsRoute. Mỗi tuyến đường cho biết một cách để đi từ điểm khởi hành đến điểm đến được cung cấp trong DirectionsRequest. Nhìn chung, hệ thống chỉ trả về một tuyến cho một yêu cầu cụ thể, trừ phi trường provideRouteAlternatives của yêu cầu được đặt thành true, trong đó có thể trả về nhiều tuyến.

Lưu ý: Thuộc tính via_waypoint không còn được dùng trong các tuyến đường thay thế. Phiên bản 3.27 là phiên bản cuối cùng của API bổ sung thêm các điểm tham chiếu trong các tuyến đường thay thế. Đối với các phiên bản API 3.28 trở lên, bạn có thể tiếp tục triển khai các lệnh kéo bằng cách sử dụng dịch vụ Chỉ đường bằng cách tắt tính năng kéo các tuyến đường thay thế. Bạn chỉ có thể kéo tuyến đường chính. Người dùng có thể kéo tuyến đường chính cho đến khi khớp với tuyến đường thay thế.

Điểm tham chiếu được mã hóa địa lý chỉ đường

DirectionsGeocodedWaypoint chứa thông tin chi tiết về phương thức mã hoá địa lý của điểm xuất phát, điểm đến và điểm tham chiếu.

DirectionsGeocodedWaypoint là giá trị cố định đối tượng có các trường sau:

geocoder_status cho biết mã trạng thái do hoạt động mã hóa địa lý gây ra. Trường này có thể chứa các giá trị sau.
- "OK" cho biết không có lỗi nào xảy ra; địa chỉ đã được phân tích cú pháp thành công và ít nhất một mã địa lý được trả về.
- "ZERO_RESULTS" cho biết rằng mã địa lý thành công nhưng không trả về kết quả. Điều này có thể xảy ra nếu bộ mã hóa được chuyển address không tồn tại.
partial_match cho biết rằng bộ mã hoá địa lý không trả về kết quả khớp chính xác cho yêu cầu ban đầu, mặc dù bộ mã hoá có thể khớp với một phần của địa chỉ đã yêu cầu. Bạn nên kiểm tra yêu cầu ban đầu để tìm lỗi chính tả và/hoặc địa chỉ không đầy đủ.

Kết quả trùng khớp một phần thường xảy ra nhất đối với các địa chỉ đường phố không tồn tại trong phạm vi địa phương mà bạn chuyển trong yêu cầu. Kết quả trùng khớp một phần cũng có thể được trả về khi một yêu cầu khớp với hai hoặc nhiều vị trí ở cùng một địa phương. Ví dụ: "Hillpar St, Bristol, UK" sẽ trả về kết quả khớp một phần cho cả Henry Street và Henrietta Street. Lưu ý rằng nếu một yêu cầu bao gồm thành phần địa chỉ sai chính tả, thì dịch vụ mã hoá địa lý có thể đề xuất một địa chỉ thay thế. Các đề xuất được kích hoạt theo cách này cũng sẽ được đánh dấu là khớp một phần.
place_id là giá trị nhận dạng duy nhất của một địa điểm. Bạn có thể sử dụng giá trị này với các API khác của Google. Ví dụ: bạn có thể sử dụng place_id với thư viện API Google Địa điểm để xem thông tin chi tiết về một doanh nghiệp địa phương, chẳng hạn như số điện thoại, giờ mở cửa, bài đánh giá của người dùng và nhiều thông tin khác. Xem thông tin tổng quan về mã địa điểm.
types[] là một mảng cho biết loại kết quả trả về. Mảng này chứa một tập hợp các thẻ từ 0 trở lên xác định loại tính năng được trả về trong kết quả. Ví dụ: mã địa lý của "Chicago" trả về "địa phương" cho biết rằng "Chicago" là một thành phố và cũng trả về "địa phương" cho biết đó là một thực thể chính trị.

Tuyến đường chỉ đường

Lưu ý: Đối tượng DirectionsTrip cũ đã được đổi tên thành DirectionsRoute. Xin lưu ý rằng hiện tại, tuyến đường là toàn bộ hành trình từ điểm bắt đầu đến điểm kết thúc, thay vì chỉ là một chặng của chuyến đi của cha mẹ.

DirectionsRoute chứa một kết quả duy nhất từ điểm đến và điểm xuất phát đã chỉ định. Tuyến này có thể bao gồm một hoặc nhiều chân (loại DirectionsLeg) tuỳ thuộc vào việc có bất kỳ điểm tham chiếu nào được chỉ định hay không. Ngoài ra, tuyến đường này còn chứa thông tin về bản quyền và cảnh báo. Ngoài thông tin định tuyến, thông tin này phải hiển thị cho người dùng.

DirectionsRoute là giá trị cố định đối tượng có các trường sau:

legs[] chứa một mảng các đối tượng DirectionsLeg, mỗi đối tượng chứa thông tin về một chân của tuyến đường, từ 2 vị trí trong một tuyến đã cho. Mỗi điểm tham chiếu hoặc điểm đến được chỉ định sẽ có một chân riêng biệt. (Một tuyến đường không có điểm tham chiếu sẽ chứa đúng một DirectionsLeg.) Mỗi chặng bao gồm một chuỗi DirectionStep.
waypoint_order chứa một mảng cho biết thứ tự của bất kỳ điểm tham chiếu nào trong tuyến đường được tính toán. Mảng này có thể chứa thứ tự đã thay đổi nếu DirectionsRequest đã được truyền optimizeWaypoints: true.
overview_path chứa một mảng LatLng đại diện cho một đường dẫn gần đúng (đã được làm mượt) của các hướng thu được.
overview_polyline chứa một đối tượng points chứa đại diện đa tuyến đã mã hoá của tuyến đường. Hình nhiều đường này là một đường dẫn gần đúng (đã được làm mịn) của các hướng thu được.
bounds chứa LatLngBounds cho biết ranh giới của polyline dọc theo tuyến đường đã cho này.
copyrights chứa văn bản bản quyền sẽ hiển thị cho tuyến đường này.
Lưu ý: Nếu không sử dụng đối tượng DirectionsRenderer được cung cấp, bạn phải tự xử lý và hiển thị thông tin này.
warnings[] chứa một loạt cảnh báo sẽ xuất hiện khi hiển thị các hướng dẫn này. Nếu không sử dụng đối tượng DirectionsRenderer được cung cấp, bạn phải tự xử lý và hiển thị các cảnh báo này.
fare chứa tổng giá vé (tức là tổng chi phí vé) trên tuyến đường này. Tài sản này chỉ được trả về cho các yêu cầu về phương tiện công cộng và chỉ đối với những tuyến đường có cung cấp thông tin giá vé cho tất cả các điểm quá cảnh. Thông tin này bao gồm:
- currency: Mã đơn vị tiền tệ theo ISO 4217 cho biết đơn vị tiền tệ của số tiền.
- value: Tổng số tiền vé theo đơn vị tiền tệ nêu trên.

Hướng dẫn chỉ đường

Lưu ý: Đối tượng DirectionsRoute cũ đã được đổi tên thành DirectionsLeg.

DirectionsLeg xác định một chặng của hành trình từ điểm khởi hành đến điểm đến trong tuyến đường được tính toán. Đối với các tuyến đường không có điểm tham chiếu, tuyến sẽ bao gồm một "chân", nhưng đối với các tuyến đường xác định một hoặc nhiều điểm tham chiếu, tuyến sẽ bao gồm một hoặc nhiều chặng tương ứng với các chân cụ thể của hành trình.

DirectionsLeg là giá trị cố định đối tượng có các trường sau:

steps[] chứa một mảng các đối tượng DirectionsStep biểu thị thông tin về từng bước riêng của chặng đường.
distance cho biết tổng quãng đường được đi bằng chân này, như một đối tượng Distance của biểu mẫu sau:
- value cho biết khoảng cách tính bằng mét
- text chứa một giá trị biểu thị dạng chuỗi của khoảng cách theo mặc định được hiển thị theo đơn vị như đã sử dụng ở điểm gốc. (Ví dụ: dặm sẽ được sử dụng cho bất kỳ điểm xuất phát nào trong phạm vi Hoa Kỳ.) Bạn có thể ghi đè hệ thống đơn vị này bằng cách đặt cụ thể một UnitSystem trong truy vấn ban đầu. Lưu ý rằng bất kể bạn sử dụng hệ thống đơn vị nào, trường distance.value luôn chứa một giá trị được biểu thị bằng mét.
Các trường này có thể không xác định nếu khoảng cách không xác định.
duration cho biết tổng thời lượng của chân này, như một đối tượng Duration của biểu mẫu sau:
- value cho biết thời lượng tính bằng giây.
- text chứa một chuỗi đại diện cho thời lượng.
Các trường này có thể không xác định nếu thời lượng không xác định.
duration_in_traffic cho biết tổng thời gian của chặng này, có tính đến điều kiện giao thông hiện tại. duration_in_traffic chỉ được trả về nếu đáp ứng tất cả các điều kiện sau:
- Yêu cầu này không bao gồm các điểm dừng. Tức là không bao gồm điểm tham chiếu trong đó stopover là true.
- Yêu cầu này chỉ dành riêng cho đường đi lái xe — mode được đặt thành driving.
- departureTime được đưa vào như một phần của trường drivingOptions trong yêu cầu.
- Tình trạng giao thông có sẵn cho tuyến đường được yêu cầu.
duration_in_traffic chứa các trường sau:
- value cho biết thời lượng tính bằng giây.
- text chứa phần trình bày mà người dùng có thể đọc được.
arrival_time chứa thời gian đến dự kiến cho chặng này. Chỗ nghỉ này chỉ được trả lại cho chỉ đường chuyển tuyến. Kết quả được trả về dưới dạng đối tượng Time có ba thuộc tính:
- value thời gian được chỉ định làm đối tượng Date JavaScript.
- text thời gian được chỉ định dưới dạng một chuỗi. Thời gian được hiển thị theo múi giờ của điểm dừng phương tiện.
- time_zone có chứa múi giờ của trạm này. Giá trị là tên của múi giờ như được xác định trong Cơ sở dữ liệu múi giờ IANA, chẳng hạn như "Châu Mỹ/New_York".
departure_time chứa thời gian khởi hành ước tính của chặng này, được xác định là đối tượng Time. departure_time chỉ có cho đường đi bằng phương tiện công cộng.
start_location chứa LatLng của nguồn gốc của chặng này. Do Dịch vụ web chỉ đường sẽ tính chỉ đường giữa các vị trí bằng cách sử dụng tuỳ chọn vận chuyển gần nhất (thường là đường) tại điểm bắt đầu và điểm cuối, nên start_location có thể khác với điểm bắt đầu đã cung cấp của chặng này nếu đường không nằm gần điểm xuất phát.
end_location chứa LatLng của đích đến của chặng này. Do DirectionsService tính chỉ đường giữa các vị trí bằng cách sử dụng tuỳ chọn vận chuyển gần nhất (thường là đường) tại điểm bắt đầu và điểm cuối, nên end_location có thể khác với điểm đến được cung cấp ở chặng này nếu đường không gần điểm đến.
start_address chứa địa chỉ mà con người có thể đọc được (thường là địa chỉ đường phố) ở đầu chặng này.

Nội dung này sẽ được đọc nguyên trạng. Bạn không nên phân tích cú pháp địa chỉ đã định dạng theo phương thức lập trình.
end_address chứa địa chỉ mà con người có thể đọc được (thường là địa chỉ đường phố) ở cuối chặng này.

Nội dung này sẽ được đọc nguyên trạng. Bạn không nên phân tích cú pháp địa chỉ đã định dạng theo phương thức lập trình.

Các bước chỉ đường

DirectionsStep là đơn vị nguyên tử nhất của lộ trình chỉ đường, chứa một bước mô tả một lệnh cụ thể trong hành trình. Ví dụ: "Rẽ trái tại W. 4 năm tiếp theo". Bước này không chỉ mô tả lệnh mà còn chứa thông tin về khoảng cách và thời lượng liên quan đến bước này liên quan đến bước tiếp theo. Ví dụ: một bước được biểu thị là "Hợp nhất lên I-80 West" có thể chứa thời lượng là "37 dặm" và "40 phút", nghĩa là bước tiếp theo là 37 dặm/40 phút từ bước này.

Khi sử dụng dịch vụ Chỉ đường để tìm kiếm thông tin chỉ đường phương tiện công cộng, mảng các bước sẽ có thêm Thông tin cụ thể về phương tiện công cộng dưới dạng đối tượng transit. Nếu chỉ đường bao gồm nhiều phương thức di chuyển, sẽ có thông tin đường đi chi tiết cho các bước đi bộ hoặc lái xe trong mảng steps[]. Ví dụ: một bước đi bộ sẽ bao gồm thông tin chỉ đường từ vị trí bắt đầu và kết thúc: "Đi bộ đến đại lộ Innes và Fitch St". Bước đó sẽ bao gồm thông tin chỉ đường đi bộ chi tiết cho tuyến đường đó trong mảng steps[], chẳng hạn như: "Đi về hướng Tây Bắc", "Rẽ trái vào Arelious Walker" và "Rẽ trái vào Innes Ave".

DirectionsStep là giá trị cố định đối tượng có các trường sau:

instructions chứa hướng dẫn cho bước này trong một chuỗi văn bản.
distance chứa khoảng cách bao gồm trong bước này cho đến bước tiếp theo dưới dạng đối tượng Distance. (Xem phần mô tả bằng DirectionsLeg ở trên.) Trường này có thể không xác định nếu không xác định được khoảng cách.
duration chứa thông tin ước tính về thời gian cần thiết để thực hiện bước này cho đến bước tiếp theo dưới dạng đối tượng Duration. (Xem nội dung mô tả trong DirectionsLeg ở trên.) Trường này có thể không xác định nếu không xác định được thời lượng.
start_location chứa LatLng được mã hoá địa lý của điểm bắt đầu của bước này.
end_location chứa LatLng của điểm cuối của bước này.
polyline chứa một đối tượng points chứa nội dung đa thức đã mã hoá của bước này. Polyline này là một đường dẫn gần đúng (đã được làm mịn) của bước.
steps[] là một đối tượng DirectionsStep chứa chữ chỉ đường chi tiết để đi bộ hoặc lái xe trong chỉ đường phương tiện. Bạn chỉ có thể sử dụng các bước phụ cho thông tin đường đi bằng phương tiện công cộng.
travel_mode chứa TravelMode dùng trong bước này. Thông tin chỉ đường phương tiện công cộng có thể bao gồm cả thông tin chỉ đường đi bộ và phương tiện công cộng.
path chứa một mảng LatLngs mô tả quá trình của bước này.
transit chứa thông tin dành riêng cho phương tiện công cộng, chẳng hạn như thời gian đến và khởi hành, tên của tuyến phương tiện công cộng.

Thông tin cụ thể về chuyển tuyến

Thông tin chỉ đường phương tiện công cộng sẽ trả về thông tin bổ sung không liên quan đến các phương thức di chuyển khác. Các thuộc tính bổ sung này được hiển thị thông qua đối tượng TransitDetails, được trả về dưới dạng thuộc tính của DirectionsStep. Từ đối tượng TransitDetails, bạn có thể truy cập thêm thông tin cho các đối tượng TransitStop, TransitLine, TransitAgency và VehicleType như mô tả dưới đây.

Thông tin về phương tiện công cộng

Đối tượng TransitDetails cho thấy các thuộc tính sau:

arrival_stop chứa một đối tượng TransitStop đại diện cho trạm đến/điểm dừng bằng các thuộc tính sau:
- name tên trạm/phương tiện công cộng. Ví dụ: "Quảng trường Liên minh".
- location vị trí của trạm/phương tiện công cộng, được biểu thị dưới dạng LatLng.
departure_stop chứa một đối tượng TransitStop đại diện cho trạm khởi hành/điểm dừng.
arrival_time chứa thời gian đến, được chỉ định dưới dạng đối tượng Time có ba thuộc tính:
- value thời gian được chỉ định làm đối tượng Date JavaScript.
- text thời gian được chỉ định dưới dạng một chuỗi. Thời gian được hiển thị theo múi giờ của điểm dừng phương tiện.
- time_zone có chứa múi giờ của trạm này. Giá trị là tên của múi giờ như được xác định trong Cơ sở dữ liệu múi giờ IANA, chẳng hạn như "Châu Mỹ/New_York".
departure_time chứa thời gian khởi hành, được xác định là một đối tượng Time.
headsign chỉ định hướng đi trên tuyến đường này, vì chỉ đường này được đánh dấu trên xe hoặc tại điểm khởi hành. Đây thường sẽ là trạm cuối.
headway khi có sẵn, điều này chỉ định số giây dự kiến giữa các chuyến khởi hành từ cùng một điểm dừng tại thời điểm này. Ví dụ: với giá trị headway là 600, bạn có thể phải chờ mười phút nếu bị lỡ chuyến xe.
line chứa giá trị cố định đối tượng TransitLine chứa thông tin về dòng phương tiện công cộng được sử dụng trong bước này. TransitLine cung cấp tên và toán tử của dòng, cùng với các thuộc tính khác được mô tả trong tài liệu tham khảo TransitLine.
num_stops chứa số điểm dừng ở bước này. Bao gồm điểm dừng đến nhưng không bao gồm điểm khởi hành. Ví dụ: nếu chỉ đường của bạn liên quan đến việc rời khỏi Điểm dừng A, đi qua các điểm dừng B và C và đến tại điểm dừng D, num_stops sẽ trả về 3.

Đường chuyển

Đối tượng TransitLine cho thấy các thuộc tính sau:

name chứa tên đầy đủ của dòng phương tiện này. Ví dụ: "7 Avenue Express" hoặc "14th St Crosstown".
short_name chứa tên ngắn của tuyến phương tiện công cộng này. Thông thường, số này sẽ là số dòng, chẳng hạn như "2" hoặc "M14".
agencies là một mảng chứa một đối tượng TransitAgency duy nhất. Đối tượng TransitAgency cung cấp thông tin về toán tử của dòng này, bao gồm các thuộc tính sau:
- name chứa tên của công ty vận tải.
- phone chứa số điện thoại của công ty vận tải.
- url chứa URL cho công ty vận tải.
Lưu ý: Nếu đang hiển thị đường đi bằng phương tiện công cộng theo cách thủ công thay vì sử dụng đối tượng DirectionsRenderer, bạn phải hiển thị tên và URL của các công ty vận tải đang cung cấp kết quả về chuyến đi.
url chứa URL cho tuyến phương tiện công cộng này do công ty vận tải cung cấp.
icon chứa URL của biểu tượng liên kết với dòng này. Hầu hết các thành phố sẽ sử dụng các biểu tượng chung khác nhau tùy theo loại phương tiện. Một số tuyến phương tiện công cộng, chẳng hạn như hệ thống tàu điện ngầm ở New York, có các biểu tượng dành riêng cho tuyến đường đó.
color có màu được sử dụng phổ biến trong bảng tín hiệu cho phương tiện công cộng này. Màu sẽ được chỉ định dưới dạng chuỗi hex như: #FF0033.
text_color chứa màu của văn bản thường dùng để ký vào dòng này. Màu sẽ được chỉ định dưới dạng một chuỗi hex.
vehicle chứa đối tượng Vehicle, bao gồm các thuộc tính sau:
- name chứa tên xe trên dòng này. Ví dụ: "Tàu điện ngầm".
- type chứa loại xe được sử dụng trên tuyến đường này. Hãy xem tài liệu về Loại xe để biết danh sách đầy đủ các giá trị được hỗ trợ.
- icon chứa URL cho biểu tượng thường liên kết với loại xe này.
- local_icon chứa URL của biểu tượng liên kết với loại phương tiện này, dựa trên biển báo vận tải địa phương.

Loại xe

Đối tượng VehicleType cho thấy các thuộc tính sau:

Giá trị	Định nghĩa
`VehicleType.RAIL`	Đường sắt.
`VehicleType.METRO_RAIL`	Phương tiện giao thông đường sắt loại nhẹ.
`VehicleType.SUBWAY`	Tàu điện ngầm.
`VehicleType.TRAM`	Đèn đường sắt phía trên mặt đất.
`VehicleType.MONORAIL`	Xe lửa chạy trên đường một ray.
`VehicleType.HEAVY_RAIL`	Đường sắt nặng.
`VehicleType.COMMUTER_TRAIN`	Tàu hoả.
`VehicleType.HIGH_SPEED_TRAIN`	Tàu cao tốc.
`VehicleType.BUS`	Xe buýt.
`VehicleType.INTERCITY_BUS`	Xe buýt liên tỉnh.
`VehicleType.TROLLEYBUS`	Ô tô điện.
`VehicleType.SHARE_TAXI`	Taxi đi chung là một loại xe buýt có khả năng đón trả khách tại bất cứ đâu trên tuyến đường.
`VehicleType.FERRY`	Phà.
`VehicleType.CABLE_CAR`	Phương tiện vận hành trên cáp, thường là trên mặt đất. Cáp treo trên không có thể thuộc loại `VehicleType.GONDOLA_LIFT`.
`VehicleType.GONDOLA_LIFT`	Cáp treo.
`VehicleType.FUNICULAR`	Một chiếc xe được kéo lên một con dốc nghiêng bằng cáp. Xe lửa leo núi thường có 2 chiếc, trong đó mỗi chiếc xe đóng vai trò là đối trọng của chiếc xe kia.
`VehicleType.OTHER`	Tất cả các phương tiện khác sẽ trả về loại này.

Kiểm tra Kết quả Chỉ đường

Các thành phần DirectionsResults — DirectionsRoute, DirectionsLeg , DirectionsStep và TransitDetails — có thể được kiểm tra và sử dụng khi phân tích cú pháp bất kỳ phản hồi chỉ đường nào.

Quan trọng: Nếu đang hiển thị thông tin đường đi bằng phương tiện công cộng theo cách thủ công thay vì sử dụng đối tượng DirectionsRenderer, bạn phải hiển thị tên và URL của các công ty vận tải đang cung cấp kết quả về chuyến đi.

Ví dụ sau đây minh họa cách đi bộ đến một số điểm du lịch nhất định tại Thành phố New York. Chúng tôi kiểm tra DirectionsStep của tuyến đường để thêm điểm đánh dấu cho mỗi bước và đính kèm thông tin vào InfoWindow kèm theo văn bản hướng dẫn cho bước đó.

Lưu ý: Vì đang tính toán thông tin chỉ đường đi bộ nên chúng tôi cũng hiển thị mọi cảnh báo cho người dùng trong một bảng <div> riêng.

var map;
var directionsRenderer;
var directionsService;
var stepDisplay;
var markerArray = [];

function initMap() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsRenderer.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

Trong nội dung HTML:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

Xem ví dụ

Sử dụng Điểm tham chiếu trong các Tuyến đường

Như đã lưu ý trong Đường đi yêu cầu, bạn cũng có thể chỉ định điểm tham chiếu (loại DirectionsWaypoint) khi tính toán tuyến đường bằng dịch vụ Chỉ đường cho chỉ đường đi bộ, đi xe đạp hoặc lái xe. Điểm tham chiếu không có sẵn cho chỉ đường chuyển tuyến. Điểm tham chiếu cho phép bạn tính toán tuyến đường thông qua các vị trí bổ sung, trong trường hợp tuyến đường trả về đi qua các điểm tham chiếu nhất định.

waypoint bao gồm các trường sau:

location (bắt buộc) chỉ định địa chỉ của điểm tham chiếu.
stopover (không bắt buộc) cho biết điểm tham chiếu này có phải là một điểm dừng thực tế trên tuyến đường (true) hay không hay chỉ là các lựa chọn ưu tiên để định tuyến qua vị trí được chỉ định (false). Điểm dừng là true theo mặc định.

Thận trọng: Việc đặt stopover thành false để tránh điểm dừng sẽ dẫn đến hướng chỉ dẫn rất chặt chẽ trong cách diễn giải điểm tham chiếu. Điều này có thể dẫn đến việc đi vòng quanh tuyến đường hoặc ZERO_RESULTS trong mã trạng thái phản hồi nếu Dịch vụ chỉ đường không thể tạo chỉ đường thông qua điểm đó.

Theo mặc định, dịch vụ Chỉ đường sẽ tính toán một tuyến đường thông qua các điểm tham chiếu đã cho theo thứ tự cho trước. Nếu muốn, bạn có thể truyền optimizeWaypoints: true trong DirectionsRequest để cho phép dịch vụ Chỉ đường tối ưu hoá tuyến được cung cấp bằng cách sắp xếp lại các điểm tham chiếu theo thứ tự hiệu quả hơn. (Tính năng tối ưu hoá này là một giải pháp cho vấn đề về nhân viên bán hàng du lịch.) Thời gian di chuyển là yếu tố chính được tối ưu hoá. Tuy nhiên, những yếu tố khác như khoảng cách, số lượt và nhiều yếu tố khác có thể được xem xét khi quyết định tuyến đường nào là hiệu quả nhất. Tất cả điểm tham chiếu phải là điểm dừng cho dịch vụ Chỉ đường để tối ưu hóa tuyến đường của chúng.

Nếu bạn ra lệnh cho dịch vụ Chỉ đường tối ưu hoá thứ tự của điểm tham chiếu, thì thứ tự của điểm tham chiếu sẽ được trả về trong trường waypoint_order trong đối tượng DirectionsResult.

Ví dụ sau đây tính toán các tuyến đường xuyên quốc gia trên toàn Hoa Kỳ bằng cách sử dụng nhiều điểm xuất phát, điểm đến và điểm tham chiếu. (Để chọn nhiều điểm tham chiếu, hãy nhấn phím Ctrl-Click khi chọn các mục trong danh sách.) Lưu ý rằng chúng ta kiểm tra routes.start_address và routes.end_address để cung cấp cho chúng ta văn bản cho điểm bắt đầu và điểm kết thúc của mỗi tuyến.

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;index.js

Giới hạn và hạn chế của Điểm tham chiếu

Có giới hạn mức sử dụng và hạn chế như sau:

Số điểm tham chiếu tối đa được phép khi sử dụng dịch vụ Chỉ đường trong API JavaScript của Maps là 25 điểm tham chiếu, cộng với điểm xuất phát và điểm đến. Các giới hạn cũng giống nhau đối với dịch vụ web Chỉ đường API.
Đối với dịch vụ web API chỉ đường, khách hàng được phép sử dụng 25 điểm tham chiếu, cộng với điểm khởi hành và điểm đến.
Khách hàng sử dụng Gói cao cấp của Google Maps Platform được phép sử dụng 25 điểm tham chiếu, cùng với điểm xuất phát và điểm đến.
Điểm tham chiếu không được hỗ trợ cho chỉ đường chuyển tuyến.

Chỉ đường có thể kéo

Người dùng có thể sửa đổi hướng đi xe đạp, đi bộ hoặc lái xe được hiển thị bằng cách sử dụng DirectionsRenderer một cách linh động nếu chúng có thể kéo được, cho phép người dùng chọn và thay đổi tuyến đường bằng cách nhấp và kéo các đường dẫn kết quả trên bản đồ. Bạn cho biết liệu màn hình của trình kết xuất có cho phép các lệnh kéo được hay không bằng cách đặt thuộc tính draggable thành true. Không thể kéo chỉ đường chuyển tuyến.

Khi có thể kéo các đường đi, người dùng có thể chọn bất kỳ điểm nào trên đường dẫn (hoặc điểm tham chiếu) của kết quả hiển thị và di chuyển thành phần được chỉ định đến vị trí mới. DirectionsRenderer sẽ tự động cập nhật để hiển thị đường dẫn đã sửa đổi. Khi phát hành, một điểm tham chiếu chuyển tiếp sẽ được thêm vào bản đồ (được biểu thị bằng một điểm đánh dấu màu trắng nhỏ). Việc chọn và di chuyển một đoạn đường sẽ thay đổi phần chân của tuyến đường, trong khi việc chọn và di chuyển một điểm đánh dấu điểm tham chiếu (bao gồm cả điểm bắt đầu và điểm đến) sẽ làm thay đổi phần chân của tuyến đường đi qua điểm tham chiếu đó.

Vì chỉ đường có thể kéo được sửa đổi và hiển thị phía máy khách, nên bạn có thể muốn theo dõi và xử lý sự kiện directions_changed trên DirectionsRenderer để nhận thông báo khi người dùng đã sửa đổi hướng hiển thị.

Đoạn mã sau đây cho thấy một chuyến đi từ Perth ở bờ biển phía tây của Úc đến Sydney ở bờ đông. Mã này theo dõi sự kiện directions_changed để cập nhật tổng khoảng cách của tất cả các chặng của hành trình.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer,
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;index.js

Xem ví dụ

Dùng thử mẫu

JSFiddle.net CodeSandbox.io Google Cloud Shell