Phần này trình bày cách sử dụng thư viện theo dõi đội xe JavaScript để theo dõi một chiếc xe cho các chuyến đi theo yêu cầu hoặc các nhiệm vụ theo lịch.
Để theo dõi một chiếc xe, bạn hãy làm theo các bước sau:
- Tải thư viện và khởi tạo khung hiển thị bản đồ
- Cung cấp vị trí của xe và chế độ xem bản đồ
- Lắng nghe các sự kiện và xử lý lỗi
- Dừng theo dõi
Tải thư viện và khởi chạy chế độ xem bản đồ
Để hiển thị hoạt động của đội xe trên bản đồ trong trang web, hãy dùng một tập lệnh gọi bản đồ bằng khoá API của bạn. Ví dụ sau đây cho thấy cách thực hiện việc này từ HTML:
Nguồn URL: Gọi API Google Maps để yêu cầu một bản đồ bằng khoá API của bạn.
Tham số
callback
: Chạy hàminitMap
sau khi API trả về lệnh gọi.Tham số
libraries
: Tải Thư viện theo dõi đội xe.Thuộc tính
defer
: Cho phép trình duyệt tiếp tục kết xuất phần còn lại của trang trong khi API tải.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
Cung cấp vị trí của xe và chế độ xem bản đồ
Để bắt đầu theo dõi một chiếc xe, bạn sẽ tạo một thực thể cho trình cung cấp vị trí của xe và khởi chạy một khung hiển thị bản đồ bằng mã nhận dạng xe như mô tả trong các phần sau.
Khởi tạo một trình cung cấp vị trí của xe
Thư viện theo dõi đội xe bằng JavaScript bao gồm một trình cung cấp vị trí cho Fleet Engine API. Sử dụng mã dự án và một tham chiếu đến trình tìm nạp mã thông báo để tạo thực thể cho mã dự án như trong các ví dụ sau.
Chuyến đi theo yêu cầu
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
Nhiệm vụ theo lịch
JavaScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
Khởi chạy chế độ xem bản đồ
Sau khi tải thư viện JavaScript Chia sẻ hành trình, hãy khởi động chế độ xem bản đồ và thêm chế độ xem đó vào trang HTML. Trang của bạn phải chứa một phần tử <div> chứa chế độ xem bản đồ. Phần tử <div> có tên là map_canvas trong các ví dụ sau.=
Chuyến đi theo yêu cầu
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Nhiệm vụ theo lịch
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Theo dõi các sự kiện và xử lý lỗi
Sau khi bắt đầu theo dõi một chiếc xe, bạn sẽ muốn cập nhật tiến trình của chiếc xe đó trên bản đồ và xử lý lỗi khi xe di chuyển dọc theo tuyến đường.
Theo dõi các sự kiện về xe
Để theo dõi tiến trình của một chiếc xe cho các chuyến đi theo yêu cầu hoặc các nhiệm vụ theo lịch, bạn cần theo dõi các sự kiện thay đổi.
Bạn truy xuất siêu dữ liệu từ đối tượng vehicle
hoặc deliveryVehicle
bằng cách sử dụng trình cung cấp vị trí. Thông tin meta bao gồm thời gian dự kiến đến và khoảng cách còn lại trước khi xe đến lấy hoặc trả khách tiếp theo. Các thay đổi đối với thông tin meta sẽ kích hoạt sự kiện update trong trình cung cấp vị trí.
Ví dụ sau đây cho thấy cách theo dõi các sự kiện thay đổi này.
Chuyến đi theo yêu cầu
JavaScript
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
Nhiệm vụ theo lịch
JavaScript
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
Xử lý lỗi
Sau khi tải thư viện JavaScript Chia sẻ hành trình, hãy khởi động chế độ xem bản đồ và thêm chế độ xem đó vào trang HTML. Trang của bạn phải chứa một phần tử <div> chứa chế độ xem bản đồ. Phần tử <div> có tên là map_canvas trong các ví dụ sau.=
Chuyến đi theo yêu cầu
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Nhiệm vụ theo lịch
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
Dừng theo dõi xe
Để ngừng theo dõi một xe, bạn cần xoá xe đó khỏi trình cung cấp vị trí và xoá trình cung cấp vị trí khỏi khung hiển thị bản đồ như mô tả trong các phần sau. Các ví dụ ở đây áp dụng cho cả việc triển khai chuyến đi theo yêu cầu và tác vụ theo lịch.
Xoá một xe khỏi nhà cung cấp vị trí
Để ngăn nhà cung cấp dịch vụ vị trí theo dõi một xe, hãy xoá mã nhận dạng xe giao hàng khỏi nhà cung cấp dịch vụ vị trí.
Chuyến đi theo yêu cầu
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
Nhiệm vụ theo lịch
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
Xoá trình cung cấp vị trí khỏi khung hiển thị bản đồ
Ví dụ sau đây cho biết cách xoá một trình cung cấp vị trí khỏi khung hiển thị bản đồ.
JavaScript
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);