Dịch vụ chỉ đường

Tổng quan

Bạn có thể tính chỉ đường (bằng nhiều phương pháp phương tiện đi lại) bằng cách sử dụng DirectionsService . Đối tượng này giao tiếp với API Chỉ đường của Google Maps Dịch vụ 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á, nhưng còn có các yếu tố khác như khoảng cách, số vòng, v.v. có thể được tính đến. Bạn có thể tự xử lý các kết quả chỉ đường này hoặc sử dụng DirectionsRenderer đối tượng để kết xuất kết quả.

Khi chỉ định điểm xuất phát 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, Úc"), giá trị LatLng hoặc Đối tượng Place (Địa điểm).

Dịch vụ Chỉ đường có thể trả về chỉ đường nhiều phần bằng cách sử dụng một chuỗi điểm tham chiếu. Đường đi sẽ xuất hiện dưới dạng hình vẽ nhiều đường tuyến đường trên bản đồ, hoặc kèm theo một loạt văn bản nội dung mô tả trong phần tử <div> (ví dụ: "Rẽ phải lên đoạn đường nối Williamsburg Bridge").

Bắt đầu

Trước khi sử dụng dịch vụ Chỉ đường trong API JavaScript của Maps, đầu tiên hãy đảm bảo Hướng dẫn được bật trong Google Cloud Console, theo cách tương tự dự án bạn thiết lập cho API Maps JavaScript.

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

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

Giá và chính sách

Giá

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

Chính sách

Việc sử dụng dịch vụ Chỉ đường phải tuân thủ các chính sách nêu trên cho Navigation API (API Hướng dẫn).

Yêu cầu xem đường đi

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ột máy chủ. Vì lý do đó, bạn cần truyền một lệnh gọi lại để thực thi sau khi hoàn tất yêu cầu. Chiến dịch 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 dự kiến dưới dạng một mảng của routes[] riêng biệt.

Để sử dụng chỉ đường trong Maps JavaScript API, hãy tạo đối tượng của nhập DirectionsService rồi gọi DirectionsService.route() để tạo một yêu cầu tới dịch vụ Chỉ đường, truyền cho dịch vụ Đối tượng DirectionsRequest chứa các cụm từ đầu vào và phương thức gọi lại để thực thi sau khi nhận được phản hồi.

Hằng đố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ừ để tính chỉ đường. Giá trị này có thể được chỉ định là String (ví dụ: "Chicago, IL"), làm LatLng hoặc dưới dạng đối tượng Place. Nếu bạn sử dụng Place (Địa điểm), bạn có thể chỉ định một mã địa điểm, chuỗi truy vấn hoặc LatLng vị trí. Bạn có thể truy xuất ID địa điểm từ Mã hoá địa lý, Đặt dịch vụ Tự động hoàn thành tìm kiếm và địa điểm trong API JavaScript cho Maps. Ví dụ về cách sử dụng mã địa điểm trong Địa điểm Tự động hoàn thành, xem Địa điểm Tính năng tự động hoàn thành và đường đi.
  • destination (bắt buộc) chỉ định vị trí kết thúc để tính chỉ đường. Các tuỳ chọn giống như cho Trường origin được mô tả ở trên.
  • travelMode (bắt buộc) chỉ định thông tin phương tiện giao thông để sử dụng khi tính toán chỉ đường. Hợp lệ các giá trị được chỉ định trong Chế độ đi lại bên dưới.
  • transitOptions (không bắt buộc) chỉ định các giá trị chỉ áp dụng cho các yêu cầu trong đó travelMode TRANSIT. Có mô tả các giá trị hợp lệ 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 các giá trị chỉ áp dụng cho các yêu cầu trong đó travelMode DRIVING. Có mô tả các giá trị hợp lệ trong phần Tuỳ chọn lái xe ở bên dưới.

  • unitSystem (không bắt buộc) chỉ định nội dung hệ thống đơn vị quảng cáo để sử dụng khi hiển thị kết quả. Các giá trị hợp lệ là được chỉ định trong Hệ thống đơn vị bên dưới.

  • waypoints[] (không bắt buộc) chỉ định một mảng DirectionsWaypoint. Thay đổi điểm tham chiếu một tuyến đường bằng cách định tuyến nó qua(các) vị trí được chỉ định. Một điểm tham chiếu được chỉ định dưới dạng một đối tượng cố định có các trường được hiển thị bên dưới:

    • location chỉ định vị trí của điểm tham chiếu, dưới dạng LatLng, làm một Đặt đối tượng hoặc dưới dạng một String sẽ được mã hoá địa lý.
    • stopover là một boolean cho biết rằng điểm tham chiếu là một điểm dừng trên tuyến đường có tác động của việc chia tuyến 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ể là 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 giá trị là 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 thông tin, hãy xem Sử dụng điểm tham chiếu trong tuyến đường below.)
  • provideRouteAlternatives (không bắt buộc) khi đặt gửi tới true chỉ định rằng dịch vụ Chỉ đường có thể hãy cung cấp nhiều lựa chọn tuyến đường trong phản hồi. Lưu ý rằng việc cung cấp các lựa chọn tuyến đường có thể làm tăng thời gian phản hồi từ máy chủ. Tính năng này chỉ dành cho các yêu cầu không có điểm tham chiếu trung gian.
  • avoidFerries (không bắt buộc) khi đặt thành true cho biết(các) tuyến đường được tính toán phải tránh phà, nếu có thể.
  • avoidHighways (không bắt buộc) khi đặt thành true cho biết(các) tuyến đường được tính toán phải tránh các đường cao tốc chính, nếu có thể.
  • avoidTolls (không bắt buộc) khi đặt thành true cho biết(các) tuyến đường được tính toán phải tránh đường có 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 ccTLD ("miền cấp cao nhất") 2 ký tự. (Để biết thêm thông tin, hãy xem Xu hướng khu vực bên dưới.)

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

{
  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 bạn tính toán chỉ đường, bạn cần phải chỉ định loại phương tiện giao thông cần sử dụng. Chuyến du lịch sau đây các chế độ hiện được hỗ trợ:

  • DRIVING (Mặc định) biểu thị chỉ đường lái xe tiêu chuẩn bằng cách sử dụng mạng lưới đường.
  • BICYCLING yêu cầu đi xe đạp chỉ đường bằng đường dành cho xe đạp & những con phố ưa thích.
  • TRANSIT yêu cầu chỉ đường qua 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è.

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

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

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

Đường đi bằng phương tiện công cộng có giới hạn thời gian. Chỉ đường sẽ chỉ được trả về cho lần trong tương lai.

Hằng đối tượng TransitOptions có chứa: trường:

{
  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ông số mong muốn thời gian đến dưới dạng đối tượng Date. Nếu thời gian đến là đã chỉ định, thời gian khởi hành sẽ bị bỏ qua.
  • departureTime (không bắt buộc) chỉ định thông số mong muốn thời gian khởi hành dưới dạng đối tượng Date. Chiến lược phát hành đĩa đơn departureTime sẽ bị bỏ qua nếu arrivalTime được chỉ định. Mặc định là bây giờ (tức là thời gian hiện tại) nếu không có giá trị nào là đượ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 các giá trị cố định khác của đối tượng TransitMode. Trường này chỉ có thể nếu yêu cầu có chứa khoá API. Mỗi TransitMode chỉ định 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 rằng tuyến đường được tính toán nên ưu tiên đi bằng xe buýt.
    • RAIL cho biết rằng tuyến đường được tính toán nên ưu tiên đi bằng tàu hoả, xe điện, tàu điện và tàu điện ngầm.
    • SUBWAY cho biết rằng tuyến đường được tính toán nên ưu tiên di chuyển bằng tàu điện ngầm.
    • TRAIN cho biết rằng tuyến đường được tính toán nên ưu tiên đi bằng tàu hoả.
    • TRAM cho biết rằng tuyến đường được tính toán nên ưu tiên đi bằng xe điện và tàu điện.
  • routingPreference (không bắt buộc) chỉ định các lựa chọn ưu tiên cho các tuyến đường phương tiện. Khi sử dụng tuỳ chọn này, bạn có thể làm sai lệch các tuỳ chọn được trả về, thay vì chấp nhận tuyến đường 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 bao gồm Khoá API. Bạn có thể sử dụng các giá trị sau:
    • FEWER_TRANSFERS cho biết rằng tuyến đường được tính toán sẽ ưu tiên số lượng chuyển cuộc gọi.
    • LESS_WALKING chỉ ra rằng tuyến đường được tính toán nên ưu tiên số lượng đi bộ.

Dưới đây là một mẫu DirectionsRequest theo 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
}

Lựa chọn lái xe

Bạn có thể chỉ định các tùy chọn định tuyến cho chỉ đường lái xe thông qua 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 cho Đối tượng drivingOptions là hợp lệ) chỉ định thời điểm khởi hành mong muốn dưới dạng đối tượng Date. Giá trị phải là đặt thành thời gian hiện tại hoặc thời điểm nào đó trong tương lai. Quảng cáo không được nằm trong quá khứ. (API chuyển đổi tất cả các ngày sang giờ UTC để đảm bảo quy trình xử lý nhất quán theo 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 đưa departureTime vào yêu cầu, thì API sẽ trả về tuyến đường tốt nhất dựa trên tình trạng giao thông dự kiến vào thời điểm đó, và bao gồm thời gian dự đoán khi tham gia giao thông (duration_in_traffic) trong câu trả lờ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), tuyến được trả về thường là tuyến đường tốt mà không cần tính đến tình trạng giao thông.
  • trafficModel (không bắt buộc) chỉ định các giả định cho dùng khi tính toán thời gian tham gia giao thông. 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, chứa thời gian lưu lượng truy cập dự đoán dựa trên mức 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 hàm được trả về duration_in_traffic phải là số liệu ước tính chính xác nhất về thời gian di chuyển dựa trên thông tin đã biết về cả tình trạng giao thông trước đây và lưu lượng truy cập trực tiếp. Giao thông trực tiếp trở nên quan trọng hơn, departureTime tính đến thời điểm hiện tại.
    • pessimistic cho biết hàm được trả về duration_in_traffic phải dài hơn quãng đường thực tế thời gian vào hầu hết các ngày, mặc dù đôi khi có lưu lượng truy cập đặc biệt kém điều kiện có thể vượt quá giá trị này.
    • optimistic cho biết hàm được trả về duration_in_traffic phải ngắn hơn kích thước thực tế thời gian đi lại vào hầu hết các ngày, mặc dù thỉnh thoảng những ngày có thời gian đặc biệt tốt tình trạng giao thông có thể nhanh hơn giá trị này.

Dưới đây là DirectionsRequest mẫu 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ệ thống thiết bị

Theo mặc định, chỉ đường được tính toán và hiển thị bằng cách sử dụng hệ thống đơn vị của quốc gia hoặc khu vực của nguồn gốc. (Lưu ý: Nguồn gốc được biểu thị bằng vĩ độ/kinh độ thay vì địa chỉ luôn mặc định thành đơn vị hệ mét.) Ví dụ: một tuyến đường từ "Chicago, Illinois" đến "Toronto, ONT" sẽ hiển thị kết quả theo 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 bằng một trong UnitSystem sau giá trị:

  • UnitSystem.METRIC chỉ định mức sử dụng hệ mét. Khoảng cách được hiển thị theo đơn vị km.
  • UnitSystem.IMPERIAL chỉ định cách sử dụng đơn vị đo lường Anh (Tiếng Anh). Quãng đường được hiển thị theo dặm.

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

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

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

Bạn cũng có thể thiết lập dịch vụ Chỉ đường để trả về kết quả xu hướng một khu vực cụ thể bằng cách sử dụng tham số region. Thông số này lấy một mã vùng, được chỉ định dưới dạng Unicode hai ký tự (không phải số) thẻ phụ khu vực. Trong hầu hết các trường hợp, các thẻ này ánh xạ trực tiếp tới ccTLD ("cấp cao nhất") miền") giá trị hai ký tự, chẳng hạn như "uk" trong "co.uk" ví dụ: Trong một số trong trường hợp khác, thẻ region cũng hỗ trợ 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 khu vực. Nhiều giá trị sẽ bị bỏ qua và có thể khiến yêu cầu không thành công.
  • Chỉ sử dụng thẻ phụ vùng có 2 ký tự (định dạng CLDR Unicode). Tất cả giá trị khác sẽ dẫn đến lỗi.

Tính năng xu hướng khu vực chỉ được hỗ trợ đối với các quốc gia và khu vực hỗ trợ đường đi. Tham khảo thông tin về phạm vi áp dụng của Nền tảng Google Maps để xem mức độ phù hợp quốc tế cho API hướng dẫn.

Hướng hiển thị

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

Trạng thái của truy vấn đường đi

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

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

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

Hiển thị RedirectResult

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

Để hiển thị DirectionsResult bằng cách sử dụng DirectionsRenderer, bạn cần thực hiện sau:

  1. Tạo đối tượng DirectionsRenderer.
  2. Gọi setMap() trên trình kết xuất để liên kết nó vào bản đồ được truyền.
  3. Gọi setDirections() trên trình kết xuất đang truyền nó DirectionsResult như đã ghi chú ở trên. Vì trình kết xuất là một MVCObject, nó 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 được liên kết với nó đã thay đổi.

Ví dụ sau đây tính toán hướng giữa hai vị trí trên Tuyến 66, là điểm khởi hành và điểm đến do "start" và "end" cho trước thiết lập trong danh sách thả xuống. DirectionsRenderer xử lý hiển thị hình nhiều đường giữa vị trí và vị trí của các điểm đánh dấu tại điểm gốc, và mọi đ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 phần 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 minh hoạ các chỉ đường sử dụng các phương tiện đi lại từ Haight-Ashbury đến Ocean Beach tại 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 phần 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ý hiển thị của hình nhiều đường và mọi điểm đánh dấu có liên quan, nhưng cũng có thể xử lý hiển thị chỉ đường bằng văn bản dưới dạng một chuỗi các bước. Việc cần làm vì vậy, hãy gọi setPanel() trên DirectionsRenderer, truyền hàm đó <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ị bản quyền phù hợp và bất kỳ cảnh báo nào có thể liên quan đến kết quả.

Hướng dẫn bằng văn bản sẽ được cung cấp bằng chế độ cài đặt ngôn ngữ ưu tiên hoặc ngôn ngữ được chỉ định khi tải API JavaScript bằng language . (Để biết thêm thông tin, hãy xem Bản địa hoá.) Đối với đường đi bằng phương tiện công cộng, thời gian sẽ là được hiển thị theo múi giờ tại điểm dừng phương tiện công cộng đó.

Ví dụ sau giống với ví dụ ở trên: nhưng bao gồm bảng điều khiển <div> trong đó hiển thị 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 phần 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ượngNavigateResult

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

  • geocoded_waypoints[] chứa một mảng DirectionsGeocodedWaypoint đối tượng, mỗi đối tượng có chứa các chi tiết về mã hoá địa lý của điểm khởi hành, điểm đến và điểm tham chiếu.
  • routes[] chứa một mảng Đối tượng DirectionsRoute. Mỗi tuyến đường cho biết một cách để đi từ điểm gốc đến điểm đến đã cung cấp trong DirectionsRequest. Thường chỉ có một tuyến đường được trả về cho mọi yêu cầu đã cho, trừ phi yêu cầu đó Trường provideRouteAlternatives đượ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 nữa trong các tuyến 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 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 chỉ đường có thể 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ế. Chỉ được là tuyến đường chính có thể kéo. Người dùng có thể kéo tuyến đường chính cho đến khi tuyến đường đó khớp với tuyến đường thay thế.

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

DirectionsGeocodedWaypoint chứa thông tin chi tiết về mã hoá địa lý của điểm khởi hành, điểm đến và điểm tham chiếu.

DirectionsGeocodedWaypoint là một đối tượng bằng chữ có các trường sau:

  • geocoder_status cho biết mã trạng thái phát sinh từ thao tác mã hoá địa lý. 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à vào lúc ít nhất một mã địa lý đã được trả về.
    • "ZERO_RESULTS" cho biết mã địa lý đã được mã hoá thành công nhưng không trả về kết quả nào. Điều này có thể xảy ra nếu bộ mã hoá địa lý đã được thông qua một address không tồn tại.

  • partial_match cho biết bộ mã hoá địa lý không trả về khớp chính xác với yêu cầu ban đầu, mặc dù có thể khớp một phần của địa chỉ được yêu cầu. Bạn nên kiểm tra yêu cầu ban đầu xem có lỗi chính tả và/hoặc không địa chỉ không đầy đủ.

    Kết quả khớp một phần thường xảy ra với các địa chỉ đường phố không tồn tại trong địa phương mà bạn gửi trong yêu cầu. Kết quả 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í trong cùng một tổ dân phố. Ví dụ: "Hillpar St, Bristol, UK" sẽ trả về kết quả khớp một phần cho cả hai Đường Henry và Đường Henryetta. Xin lưu ý rằng nếu yêu cầu bao gồm thành phần địa chỉ bị sai chính tả, dịch vụ mã hoá địa lý có thể đề xuất phương án thay thế của bạn. Các đề xuất được kích hoạt theo cách này cũng sẽ được đánh dấu là một phần khớp.

  • place_id là giá trị nhận dạng duy nhất của một địa điểm, có thể dùng với các API khác của Google. Ví dụ: bạn có thể sử dụng place_id với Google Địa điểm API để lấy 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.v. Xem tổng quan về mã địa điểm.
  • types[] là một mảng cho biết loại của kết quả được trả về. Mảng này chứa một tập hợp không hoặc nhiều thẻ nhận dạng loại đối tượng được trả về trong kết quả. Ví dụ: mã địa lý của "Chicago" trả về "địa phương" điều này cho biết rằng "Chicago" là một thành phố và cũng trả về "chính trị" cho biết đó là một pháp nhân chính trị.

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

Lưu ý: Đối tượng DirectionsTrip cũ đã được đổi tên thành DirectionsRoute. Lưu ý rằng một tuyến đường giờ đây đề cập đến toàn bộ hành trình từ điểm bắt đầu đến kết thúc, thay vì chỉ đơn thuần 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 khởi hành và điểm đến đã chỉ định. Tuyến đường này có thể có 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. Đồng thời, cũng chứa thông tin về bản quyền và cảnh báo. Các thông tin này phải được hiển thị cho người dùng ngoài thông tin định tuyến.

DirectionsRoute là một đối tượng bằng chữ có các trường sau:

  • legs[] chứa một mảng DirectionsLeg đối tượng, mỗi đối tượng chứa thông tin về đoạn đường, từ hai vị trí trong tuyến đường đã cho. Mỗi đường dẫn sẽ có một chân riêng điểm tham chiếu hoặc đích đến đã chỉ định. (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 trong một chuỗi DirectionStep.
  • waypoint_order chứa một mảng cho biết thứ tự của mọi điểm tham chiếu trong tuyến đường. Mảng này có thể chứa thứ tự đã được thay đổi nếu DirectionsRequest đã vượt qua optimizeWaypoints: true
  • overview_path chứa một mảng LatLng biểu thị giá trị gần đúng (đã được làm mượt) đường đi của các chỉ đường kết quả.
  • overview_polyline chứa một points đối tượng chứa tệp đã mã hoá hình nhiều đường 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ượt) của chỉ đường kết quả.
  • bounds chứa LatLngBounds cho biết ranh giới của hình nhiều đường dọc theo tuyến đường cho trước này.
  • copyrights chứa văn bản có bản quyền cần được được hiển thị cho tuyến đường này.
  • warnings[] chứa một mảng cảnh báo được hiển thị khi hiển thị các chỉ đường này. Nếu bạn không hãy 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 cộng chi phí vé) trên chặng bay này. Cơ sở lưu trú này chỉ được trả về để vận chuyển và chỉ dành cho những tuyến đường có thông tin giá vé cho tất cả chân phương tiện công cộng. Thông tin này bao gồm:
    • currency: Một Đơn vị tiền tệ theo ISO 4217 mã cho biết đơn vị tiền tệ mà số tiền được dùng.
    • value: Tổng giá vé, theo đơn vị tiền tệ được chỉ định ở trên.

Chặng chỉ đường

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

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

DirectionsLeg là một đối tượng có giá trị cố định 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 biệt trong chặng đường dài của hành trình.

  • distance cho biết tổng quãng đường đã đi bởi chân này, dưới dạng một đối tượng Distance của biểu mẫu sau:

    • value cho biết khoảng cách theo mét
    • text chứa một biểu diễn chuỗi của khoảng cách mà theo mặc định được hiển thị theo đơn vị là được sử dụng tại máy chủ gốc. (Ví dụ: dặm sẽ được dùng cho bất kỳ nguồn gốc nào trong phạm vi Hoa Kỳ). Bạn có thể ghi đè giá trị này bằng cách thiết lập cụ thể 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 giá trị được biểu thị bằng mét.

    Các trường này có thể là không xác định nếu không xác định được khoảng cách.

  • duration cho biết tổng thời lượng chân này, dưới dạng đối tượng Duration của biểu mẫu sau:

    • value cho biết thời lượng theo giây.
    • text chứa một biểu diễn chuỗi thời lượng.

    Các trường này có thể không được xác định nếu không xác định được thời lượng.

  • duration_in_traffic cho biết tổng thời lượng của sự kiện này dựa trên tình trạng giao thông hiện tại. Chiến lược phát hành đĩa đơn duration_in_traffic chỉ được trả về nếu tất cả các điều kiện sau là đúng:

    • Yêu cầu không bao gồm các điểm trung gian dừng. Tức là không bao gồm các điểm tham chiếu trong đó stopover là true.
    • Yêu cầu dành riêng cho chỉ đường lái xe— mode được đặt thành driving.
    • departureTime có trong Trường drivingOptions trong yêu cầu.
    • Có sẵn tình trạng giao thông 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 một hình ảnh biểu thị mà con người có thể đọc được thời lượng.
  • arrival_time chứa thời gian đến dự kiến cho chặng này. Cơ sở lưu trú này chỉ được trả về cho chỉ đường phương tiện công cộng. Chiến lược phát hành đĩa đơn kết quả được trả về dưới dạng đối tượng Time có 3 thuộc tính:
    • value thời gian được chỉ định làm JavaScript Đối tượng Date.
    • text thời gian được chỉ định dưới dạng chuỗi. Thời gian là được hiển thị theo múi giờ của điểm dừng phương tiện công cộng.
    • time_zone chứa múi giờ của trạm này. Chiến lược phát hành đĩa đơn giá trị là tên của múi giờ như được xác định trong Múi giờ IANA Cơ sở dữ liệu, ví dụ: "Mỹ/New_ York".
  • departure_time chứa thời gian khởi hành dự kiến cho chân này, được chỉ định làm đối tượng Time. Chiến lược phát hành đĩa đơn departure_time chỉ có sẵn cho chỉ đường phương tiện.
  • start_location chứa LatLng nguồn gốc của chặng này. Vì Dịch vụ web chỉ đường tính toán chỉ đường giữa các vị trí bằng cách sử dụng phương tiện giao thông gần nhất (thường là đường) tại điểm xuất phát và điểm kết thúc, start_location có thể khác với điểm khởi hành được cung cấp của đoạn này nếu, đối với ví dụ: đường không gần nguồn gốc.
  • end_location chứa LatLng điểm đến của chặng này. Vì DirectionsService tính toán chỉ đường giữa các vị trí bằng cách sử dụng phương tiện giao thông gần nhất (thường là một con đường) ở điểm xuất phát và điểm đến, end_location có thể là khác với điểm đến được cung cấp của chặng này nếu, cho ví dụ: đườ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 đoạn đường này.

    Nội dung này cần được đọc nguyên trạng. Không phân tích cú pháp địa chỉ được định dạng.
  • end_address chứa địa chỉ mà con người có thể đọc được (thường là địa chỉ đường phố) ở cuối đoạn đường này.

    Nội dung này cần được đọc nguyên trạng. Không phân tích cú pháp địa chỉ được định dạng.

Các bước xem đường đi

DirectionsStep là đơn vị nguyên tử nhất của tuyến đường, chứa một bước mô tả một bước cụ thể, hướng dẫn trong hành trình. Ví dụ: " Rẽ trái tại W. St." Bước không phải chỉ mô tả hướng dẫn nhưng cũng chứa khoảng cách và thời lượng thông tin liên quan đến mối liên hệ giữa bước này với bước tiếp theo. Ví dụ: một bước được ký hiệu là "Hợp nhất vào I-80 West" có thể chứa thời lượng "37 dặm" và "40 phút" cho biết rằng 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 chỉ đường phương tiện, Mảng bước sẽ bao gồm dữ liệu Phương tiện công cộng bổ sung Thông tin cụ thể ở dạng đối tượng transit. Nếu chỉ đường bao gồm nhiều phương thức di chuyển, chỉ đường chi tiết sẽ được cung cấp cho các bước đi bộ hoặc lái xe trong một mảng steps[]. Ví dụ: một bước đi bộ sẽ bao gồm thông tin chỉ đường từ điểm xuất phát và điểm kết thúc vị trí: "Đi bộ tới Innes Ave & Fitch St". Bước đó sẽ bao gồm đường đi bộ chi tiết cho tuyến đường đó trong steps[] 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à một đối tượng có giá trị cố định 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 mà chỉ số này đi được cho đến bước tiếp theo, làm đối tượng Distance. (Xem phần mô tả trong DirectionsLeg ở trên.) Có thể trường này chưa được xác định nếu không xác định được khoảng cách.
  • duration chứa thời gian ước tính cần thiết để thực hiện bước đó, cho đến bước tiếp theo, như một Đối tượng Duration. (Xem mô tả trong DirectionsLeg above.) Có thể trường này chưa được xác định nếu không xác định được thời lượng.
  • start_location chứa mã địa lý LatLng đ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 points đối tượng chứa tệp đã mã hoá hình nhiều đường của bước này. Hình nhiều đường này là một đường dẫn gần đúng (được làm mượt) của bước này.
  • steps[] một giá trị cố định của đối tượng DirectionsStep chứa chỉ đường chi tiết về các bước đi bộ hoặc lái xe khi sử dụng phương tiện công cộng đường đi. Các bước phụ chỉ áp dụng cho đường đi bằng phương tiện công cộng.
  • travel_mode chứa TravelMode được dùng trong bước này. Các chỉ đường chuyển tuyến có thể kết hợp giữa đi bộ và đường đi bằng phương tiện công cộng.
  • path chứa một mảng LatLngs mô tả trong 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, cũng như tên của đường chuyển tuyến.

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

Chỉ đường chuyển tuyến trả về thông tin bổ sung không có liên quan cho các phương thức vận tải 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ông tin bổ sung về TransitStop, TransitLine, TransitAgency và VehicleType như mô tả dưới đây.

Chi tiết về phương tiện công cộng

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

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

Đường phương tiện

Đối tượng TransitLine hiển thị các thuộc tính sau:

  • name chứa tên đầy đủ của đường chuyển tuyến này. ví dụ: "7 Avenue Express" hoặc "14th St Crosstown".
  • short_name chứa tên ngắn của phương tiện công cộng này . Đây thường sẽ là một 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. Đối tượng TransitAgency cung cấp thông tin về toán tử của đường dây 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 phương tiện công cộng đại lý.
    • url chứa URL của công ty vận tải.

    Lưu ý: Nếu bạn đ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 phục vụ chuyến đi kết quả.

  • url chứa URL cho đường chuyển tuyến này như được cung cấp bởi công ty vận tải.
  • icon chứa URL cho 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 tuỳ theo loại xe. Hơi nhiều các 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 dòng đó.
  • color có chứa màu thường dùng trong các biển hiệu cho thuộc tính này phương tiện công cộng. Màu sắc sẽ được chỉ định dưới dạng một chuỗi hex, chẳng hạn như: #FF0033.
  • text_color chứa màu văn bản thường dùng cho của dòng này. Màu sắc sẽ được chỉ định dưới dạng một chuỗi hex.
  • vehicle chứa một đối tượng Vehicle bao gồm các thuộc tính sau:
    • name chứa tên của xe trên dòng này. Ví dụ: "Tàu điện ngầm."
    • type chứa loại phương tiện được sử dụng trên tuyến này. Hãy xem giấy tờ 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 được liên kết với loại xe này.
    • local_icon chứa URL của biểu tượng được liên kết loại xe này, dựa trên biển báo giao thông tại địa phương.

Loại xe

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

Giá trị Định nghĩa
VehicleType.RAIL Đường sắt.
VehicleType.METRO_RAIL Phương tiện bằng tàu điện.
VehicleType.SUBWAY Tàu điện dưới lòng đất.
VehicleType.TRAM Tàu điện 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 chở khách đi làm.
VehicleType.HIGH_SPEED_TRAIN Tàu cao tốc.
VehicleType.BUS Xe buýt.
VehicleType.INTERCITY_BUS Xe buýt liên thành phố.
VehicleType.TROLLEYBUS Ô tô điện.
VehicleType.SHARE_TAXI Taxi đi chung là một loại xe buýt có thể xuống xe và đón khách tăng hành khách ở bất cứ đâu trên tuyến đường của họ.
VehicleType.FERRY Phà.
VehicleType.CABLE_CAR Phương tiện vận hành bằng cáp, thường là ở trên mặt đất. Cáp treo ô tô có thể thuộc loại VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFT Tuyến cáp treo trên không.
VehicleType.FUNICULAR Một chiếc xe được kéo lên một đoạn dốc đứng bằng dây cáp. Xe lửa có dây kéo thường gồm hai ô tô, trong đó mỗi ô tô đóng vai trò là đối trọng cho phần còn lại.
VehicleType.OTHER Tất cả xe khác sẽ trả về loại này.

Kiểm tra Chỉ dẫn kết quả

Các thành phần DirectionsResults – DirectionsRoute, DirectionsLeg DirectionsStep và TransitDetails — có thể là đã 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.

Lưu ý quan trọng: Nếu bạn đang kết xuất phương tiện công cộng chỉ đường theo cách thủ công thay vì sử dụng DirectionsRenderer là đối tượng mục tiêu, bạn phải hiển thị tên và URL của công ty vận tải thực hiện kết quả chuyến đi.

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

Lưu ý: Vì chúng tôi đang tính toán chỉ đường đi bộ, nên chúng tôi cũng hiển thị bất kỳ cảnh báo nào cho người dùng trong một bảng điều khiển <div> riêng biệt.

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 phần 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 tuyến đường

Như đã nêu trong DirectionsRequest, bạn cũng có thể chỉ định điểm tham chiếu (thuộc loại DirectionsWaypoint) khi tính toán tuyến đường sử dụng dịch vụ Chỉ đường để đi bộ, đi xe đạp hoặc lái xe đường đi. Điểm tham chiếu không khả dụng cho chỉ đường phương tiện. Điểm tham chiếu cho phép bạn tính toán tuyến đường qua các vị trí khác, trong trong trường hợp tuyến đường được trả về sẽ đi qua các điểm tham chiếu cho trước.

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

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

Theo mặc định, dịch vụ Chỉ đường sẽ tính toán tuyến đường qua các điểm tham chiếu được cung cấp theo thứ tự đã cho của chúng. Nếu muốn, bạn có thể truyền optimizeWaypoints: true bên trong DirectionsRequest để cho phép dịch vụ Chỉ đường tối ưu hoá tuyến đường được cung cấp bằng cách sắp xếp lại các điểm tham chiếu trong đơn đặt hàng hiệu quả hơn. (Tối ưu hoá này là một ứng dụng của 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 nhưng các yếu tố khác như khoảng cách, số vòng, v.v. có thể được cân nhắc 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 hoá tuyến đường.

Nếu bạn hướng dẫn dịch vụ Chỉ đường tối ưu hoá thứ tự của tham chiếu của mình, đơn đặt hàng của họ sẽ được trả lại 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 qua Hoa Kỳ bằng cách sử dụng nhiều điểm xuất phát, điểm cuối, và điểm tham chiếu. (Để chọn nhiều điểm tham chiếu, hãy nhấn Ctrl-Nhấp khi chọn các mục trong danh sách.) Xin lưu ý rằng chúng ta sẽ kiểm tra routes.start_address và routes.end_address để cung cấp chúng tôi bằng nội dung tương ứng với điểm xuất phát và điểm kết thúc của mỗi tuyến đường.

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ế cho Điểm tham chiếu

Các hạn mức và hạn chế sử dụng sau đây sẽ được áp dụng:

  • 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, cùng với điểm khởi hành và điểm đến. Các giới hạn là như nhau API Chỉ đường của Google.
  • Đối với Dịch vụ web API hướng dẫn, khách hàng được phép 25 điểm tham chiếu, điểm xuất phát và điểm đến.
  • Khách hàng được phép sử dụng Gói cao cấp của Nền tảng Google Maps 25 điểm tham chiếu, điểm xuất phát và điểm đến.
  • Điểm tham chiếu không được hỗ trợ cho chỉ đường phương tiện.

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

Người dùng có thể sửa đổi chỉ đường đi xe đạp, đi bộ hoặc lái xe được hiển thị bằng cách sử dụng DirectionsRenderer linh động nếu có thể kéo, cho phép người dùng chọn và thay đổi bằng cách nhấp và kéo đườ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 kéo được hay không đường đi bằng cách đặt thuộc tính draggable đến true. Không thể kéo chỉ đường chuyển tuyến.

Khi chỉ đường có thể kéo, 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ả được hiển thị và di chuyển vào một vị trí mới. DirectionsRenderer sẽ cập nhật động để hiển thị đường dẫn đã sửa đổi. Sau 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 nhỏ màu trắng). Thao tác chọn và di chuyển một đoạn đường dẫn sẽ thay đổi đoạn đó của tuyến đường, trong khi chọn và di chuyển điểm đánh dấu điểm tham chiếu (bao gồm điểm bắt đầu và điểm kết thúc) sẽ thay đổi chân của tuyến đường đi qua điểm tham chiếu đó.

Bởi vì hướng có thể kéo được sửa đổi và hiển thị ở phía máy khách, bạn nên theo dõi và xử lý directions_changed sự kiện diễn ra vào DirectionsRenderer để được thông báo khi người dùng đã sửa đổi các hướng dẫn được 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 đến Sydney ở bờ biển phía đông. Mã này giám sát directions_changed sự kiện để cập nhật tổng quãng đường trên mọi chặng đườ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