Phần này trình bày cách sử dụng thư viện theo dõi nhóm JavaScript để theo dõi để phục vụ các chuyến đi theo yêu cầu hoặc nhiệm vụ đã lên lịch.
Để theo dõi xe, bạn làm theo các bước sau:
- Tải thư viện và khởi chạy chế độ xem bản đồ
- Cung cấp vị trí của xe và chế độ xem bản đồ
- Nghe các sự kiện và xử lý lỗi
- Ngừ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 của bạn, hãy sử dụng một tập lệnh gọi bản đồ bằng khoá API của bạn. Ví dụ sau đây minh hoạ cách để thực hiện việc này từ HTML:
Nguồn URL: Gọi API Google Maps để yêu cầu bản đồ bằng khoá API.
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 nhóm.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.<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 xe, cả hai bạn đều tạo thực thể của một nhà cung cấp vị trí xe và khởi chạy chế độ xem bản đồ với mã xe như được mô tả trong .
Tạo thực thể cho nhà cung cấp vị trí xe
Thư viện theo dõi nhóm JavaScript bao gồm nhà cung cấp vị trí cho Nhóm API Engine. Sử dụng mã dự án và tệp tham chiếu đến trình tìm nạp mã thông báo của bạn để tạo thực thể 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',
});
Việc cần làm đã lên 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 Chia sẻ hành trình JavaScript, hãy khởi chạy chế độ xem bản đồ rồi thêm vào trang HTML. Trang của bạn nên có phần tử <div> lưu 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);
Việc cần làm đã lên 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
Khi đã bắt đầu theo dõi xe, bạn muốn cập nhật tiến trình của phương tiện đó trên bản đồ và xử lý lỗi khi xe đi dọc theo tuyến đường.
Theo dõi sự kiện phương tiện
Để theo dõi tiến trình của xe cho các chuyến đi theo yêu cầu hoặc nhiệm vụ đã lên lịch, bạn cần theo dõi các sự kiện thay đổi.
Bạn truy xuất meta từ đối tượng vehicle
hoặc deliveryVehicle
bằng cách sử dụng phương thức
nhà cung cấp vị trí. Thông tin meta bao gồm giờ đến dự kiến và quãng đường còn lại
trước lần đến lấy hoặc trả xe tiếp theo. Các thay đổi đối với siêu thông tin
kích hoạt sự kiện cập nhật trong trình cung cấp vị trí.
Ví dụ sau đây cho thấy cách theo dõi những 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);
}
});
Việc cần làm đã lên 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 Chia sẻ hành trình JavaScript, hãy khởi chạy chế độ xem bản đồ rồi thêm vào trang HTML. Trang của bạn nên có 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);
Việc cần làm đã lên 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 nhà cung cấp vị trí và hãy xoá trình cung cấp vị trí khỏi chế độ xem bản đồ như mô tả trong phần sau . Các ví dụ ở đây áp dụng cho cả chuyến đi theo yêu cầu và tác vụ đã lên lịch trong quá trình triển khai.
Xoá xe khỏi nhà cung cấp vị trí
Để ngăn nhà cung cấp vị trí theo dõi xe, hãy xóa mã xe giao hàng từ nhà cung cấp vị trí.
Chuyến đi theo yêu cầu
JavaScript
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
Việc cần làm đã lên lịch
JavaScript
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
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);