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:
- Chuyển đến Bảng điều khiển Google Cloud.
- 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ở.
- Trong danh sách API trên Trang tổng quan, hãy tìm Direction API.
- 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:
- Ở đầ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.
- Tìm kiếm Directions API (API Chỉ đường), sau đó chọn API này từ danh sách kết quả.
- 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àmLatLng
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ặcLatLng
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ườngorigin
đượ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ảngDirectionsWaypoint
. 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ạngLatLng
, làm một Đặt đối tượng hoặc dưới dạng mộtString
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ụngwaypoints
đượ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ườngwaypoint_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ớitrue
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ànhtrue
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ànhtrue
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ànhtrue
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ượngDate
. 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ượngDate
. Chiến lược phát hành đĩa đơndepartureTime
sẽ bị bỏ qua nếuarrivalTime
đượ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 chodepartureTime
hoặcarrivalTime
.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ượngTransitMode
. Trường này chỉ có thể nếu yêu cầu có chứa khoá API. MỗiTransitMode
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ượngdrivingOptions
là hợp lệ) chỉ định thời điểm khởi hành mong muốn dưới dạng đối tượngDate
. 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 đưadepartureTime
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ồmdrivingOptions
), 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ườngduration_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ứaDirectionsResult
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ườngDirectionsWaypoint
đã được cung cấp trongDirectionsRequest
. 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ấpDirectionsRequest
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:
- Tạo đối tượng
DirectionsRenderer
. - Gọi
setMap()
trên trình kết xuất để liên kết nó vào bản đồ được truyền. - 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ộtMVCObject
, 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>
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>
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>
Đố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ảngDirectionsGeocodedWaypoint
đố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ượngDirectionsRoute
. 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 trongDirectionsRequest
. 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ườngprovideRouteAlternatives
được đặt thànhtrue
, 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ộtaddress
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ụngplace_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ảngDirectionsLeg
đố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ộtDirectionsLeg
.) Mỗi chặng bao gồm trong một chuỗiDirectionStep
.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ếuDirectionsRequest
đã vượt quaoptimizeWaypoints: true
.overview_path
chứa một mảngLatLng
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ộtpoints
đố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ứaLatLngBounds
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ượngDirectionsRenderer
đượ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ượngDirectionsStep
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ượngDistance
của biểu mẫu sau:value
cho biết khoảng cách theo méttext
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ườngdistance.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ượngDuration
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 đơnduration_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ànhdriving
. departureTime
có trong TrườngdrivingOptions
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.
- 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 đó
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ượngTime
có 3 thuộc tính:value
thời gian được chỉ định làm JavaScript Đối tượngDate
.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ượngTime
. Chiến lược phát hành đĩa đơndeparture_time
chỉ có sẵn cho chỉ đường phương tiện.start_location
chứaLatLng
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ứaLatLng
đ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ượngDistance
. (Xem phần mô tả trongDirectionsLeg
ở 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ượngDuration
. (Xem mô tả trongDirectionsLeg
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ứaLatLng
của điểm cuối của bước này.polyline
chứa mộtpoints
đố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ượngDirectionsStep
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ứaTravelMode
đượ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ảngLatLngs
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ứaTransitStop
đố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ạngLatLng
.
departure_stop
chứaTransitStop
đố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ượngTime
có 3 thuộc tính:value
thời gian được chỉ định làm JavaScript Đối tượngDate
.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ượngTime
.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. Để 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ứaTransitLine
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ả trongTransitLine
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ượngTransitAgency
. Đối tượngTransitAgency
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ượngVehicle
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>
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;
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;
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;
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;