Giờ đây bạn đã thiết lập JavaScript Consumer SDK cho các tác vụ đã được lên lịch, bạn sẵn sàng theo dõi lô hàng cùng ứng dụng tiêu dùng của bạn. Tài liệu này bao gồm các bước quan trọng sau đây trong quy trình này:
- Khởi chạy bản đồ và hiển thị hành trình được chia sẻ
- Cập nhật và theo dõi tiến trình của hành trình
- Ngừng chia sẻ hành trình
- Xử lý lỗi
Thiết lập bản đồ
Để theo dõi việc đến lấy hàng hoặc giao hàng trong ứng dụng web, bạn cần tải một bản đồ và tạo SDK tiêu dùng để bắt đầu theo dõi lô hàng của bạn. Bạn có thể tải bản đồ mới hoặc sử dụng bản đồ hiện có. Sau đó, bạn sử dụng phương thức khởi tạo để tạo SDK người tiêu dùng để chế độ xem bản đồ tương ứng với vị trí của mặt hàng đang được theo dõi.
Tải bản đồ mới bằng cách sử dụng API JavaScript của Google Maps
Để tạo bản đồ mới, hãy tải API JavaScript của Google Maps trong ứng dụng web của bạn. Chiến lược phát hành đĩa đơn ví dụ sau cho biết cách tải API JavaScript của Google Maps, bật SDK và kích hoạt quá trình kiểm tra việc khởi chạy.
- Tham số
callback
sẽ chạy hàminitMap
sau khi API tải. - Thuộc tính
defer
cho phép trình duyệt tiếp tục hiển thị phần còn lại của trong khi API tải.
Dùng hàm initMap
để tạo SDK người tiêu dùng. Ví dụ:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Tải bản đồ hiện có
Bạn cũng có thể tải bản đồ hiện có được tạo bằng API JavaScript của Google Maps, chẳng hạn như tài khoản bạn đang sử dụng.
Ví dụ: giả sử bạn có trang web có google.maps.Map
chuẩn
thực thể trên đó một điểm đánh dấu được hiển thị như được xác định trong mã HTML sau. Chiến dịch này
hiển thị bản đồ của bạn bằng cách sử dụng cùng một hàm initMap
trong lệnh gọi lại ở cuối:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Pier 39 in San Francisco
var pier39 = {lat: 37.809326, lng: -122.409981};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Pier 39
var marker = new google.maps.Marker({position: pier39, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The defer attribute allows the browser to render the page while the API loads.
* The key parameter contains your own API key.
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Tạo thực thể cho nhà cung cấp vị trí vận chuyển
Sử dụng nhà cung cấp vị trí vận chuyển cùng với mã thông báo uỷ quyền trình tìm nạp mà bạn đã xác định trước đó để bắt đầu nhận dữ liệu từ Fleet Engine.
Những ví dụ này cho thấy cách tạo thực thể cho trình cung cấp vị trí.
JavaScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
TypeScript
const locationProvider =
new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the fetcher defined previously
});
Hiển thị hành trình chung
Để bản đồ hiển thị hành trình chung, bạn cần phải khởi chạy chế độ xem, đặt khung cho chính bản đồ tương ứng với vị trí của hành trình được theo dõi do SDK người tiêu dùng cung cấp sau khi SDK nhận được thông tin từ Fleet Engine.
Lưu ý:
Đảm bảo trang của bạn chứa phần tử <div> lưu chế độ xem bản đồ. Trong ví dụ sau, phần tử <div> được đặt tên là
map_canvas
.Lưu ý các quy tắc hiển thị mặc định mà Fleet Engine áp dụng cho việc theo dõi hành trình của họ. Bạn cũng có thể thiết lập các quy tắc hiển thị cho xe đang hoạt động vận chuyển và các nhiệm vụ dừng theo lịch. Xem mục Tuỳ chỉnh chế độ hiển thị việc cần làm trong Hướng dẫn về Định cấu hình việc cần làm.
Những ví dụ này cho thấy cách khởi tạo chế độ xem bản đồ.
JavaScript
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// Any undefined styling options use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking starts as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
}
TypeScript
function initMap() {
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking starts as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
}
Cập nhật tiến trình vận chuyển
Bạn có thể theo dõi các sự kiện và cập nhật tiến trình vận chuyển dưới dạng một hành trình
tiếp tục. Sử dụng trình cung cấp vị trí để truy xuất thông tin meta từ
Đối tượng taskTrackingInfo
. Thay đổi đối với thẻ meta
thông tin kích hoạt sự kiện update. Đối tượng taskTrackingInfo
cung cấp
như sau:
- ETA
- Số điểm dừng còn lại
- Quãng đường còn lại trước khi đến lấy hàng hoặc giao hàng
Ví dụ sau đây cho thấy cách theo dõi những sự kiện thay đổi này.
JavaScript
locationProvider.addListener('update', e => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
Hiển thị tiêu chí cho nhiều tác vụ
SDK người tiêu dùng cho các tác vụ đã lên lịch chỉ hiển thị một tác vụ trên mỗi mã theo dõi trên bản đồ. Tuy nhiên, bạn cũng thường chỉ định một mã theo dõi cho một hàng hoá vận chuyển liên quan đến hàng hoá đó trong suốt hành trình vận chuyển trong hệ thống của bạn. Điều này có nghĩa là một mã theo dõi duy nhất có thể được liên kết với nhiều nhiệm vụ, chẳng hạn như nhiệm vụ đến lấy hàng, sau đó là nhiệm vụ phân phối cho cùng một nhiệm vụ gói hàng hoặc nhiều nhiệm vụ vận chuyển không thành công cho một gói hàng.
Để xử lý tình huống này, Fleet Engine áp dụng tiêu chí để hiển thị tác vụ, như trong bảng sau.
Tiêu chí về việc cần làm | Kết quả |
---|---|
Mở nhiệm vụ đến lấy hàng | |
Chỉ có một | Hiển thị việc cần làm |
Tồn tại nhiều | Tạo lỗi |
Các nhiệm vụ đến lấy hàng đã hoàn tất | |
Chỉ có một | Hiển thị việc cần làm |
Nhiều tồn tại (một số có thời gian kết quả) | Hiện việc cần làm có thời gian kết quả gần đây nhất |
Tồn tại nhiều lần (không có thời gian kết quả) | Tạo lỗi |
Mở nhiệm vụ phân phối | |
Chỉ có một | Hiển thị việc cần làm |
Tồn tại nhiều | Tạo lỗi |
Nhiệm vụ phân phối khép kín | |
Chỉ có một | Hiển thị việc cần làm |
Nhiều tồn tại (một số có thời gian kết quả) | Hiện việc cần làm có thời gian kết quả gần đây nhất |
Tồn tại nhiều lần (không có thời gian kết quả) | Tạo lỗi |
Dừng theo dõi lô hàng
Khi một hành trình vận chuyển hoàn tất hoặc bị huỷ, ứng dụng tiêu dùng của bạn phải kết thúc chia sẻ hành trình bằng cách xoá mã theo dõi và nhà cung cấp vị trí khỏi chế độ xem bản đồ.
Xoá mã theo dõi
Để ngăn nhà cung cấp vị trí theo dõi quá trình vận chuyển, hãy xoá mã theo dõi từ nhà cung cấp vị trí. Các ví dụ sau đây minh hoạ cách thực hiện việc này.
JavaScript
locationProvider.trackingId = '';
TypeScript
locationProvider.trackingId = '';
Xoá trình cung cấp vị trí khỏi chế độ xem bản đồ
Ví dụ sau đây minh hoạ cách xoá nhà cung cấp vị trí khỏi chế độ xem bản đồ.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);
Xử lý lỗi theo dõi lô hàng
Lỗi phát sinh không đồng bộ khi yêu cầu điều kiện kích hoạt thông tin vận chuyển lỗi. Ví dụ sau đây minh hoạ cách theo dõi những sự kiện này để xử lý lỗi.
JavaScript
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
TypeScript
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
Lưu ý: Hãy nhớ gói các lệnh gọi thư viện trong khối try...catch
để xử lý các lỗi ngoài dự kiến.