Theo dõi phương tiện

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 nhiệm vụ đã lên lịch.

Để theo dõi một chiếc xe, bạn hãy thực hiện các bước sau:

  1. Tải thư viện và khởi chạy chế độ xem bản đồ
  2. Cung cấp vị trí của xe và chế độ xem bản đồ
  3. Lắng nghe các sự kiện và xử lý lỗi
  4. 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 sử dụng một tập lệnh gọi bản đồ bằng khoá API. Ví dụ sau đây cho biết 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àm initMap 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 vừa phải tạo thực thể cho nhà cung cấp vị trí của xe, vừa phải khởi chạy chế độ xem bản đồ bằng mã xe như mô tả trong các phần sau.

Tạo thực thể cho nhà cung cấp vị trí của xe

Thư viện theo dõi đội xe JavaScript bao gồm một nhà cung cấp vị trí cho API Fleet Engine. 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 nhà cung cấp vị trí như minh hoạ 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ụ đã 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 JavaScript Chia sẻ hành trình, hãy khởi chạy chế độ xem bản đồ và thêm chế độ xem đó vào trang HTML. Trang của bạn phải chứa một <div> phần tử giữ chế độ xem bản đồ. Phần tử <div> được đặt 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ụ đã 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);

Lắng nghe 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 muốn cập nhật tiến trình của xe trên bản đồ và xử lý lỗi khi xe di chuyển dọc theo tuyến đường.

Lắng nghe 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 nhiệm vụ đã lên lịch, bạn cần lắng nghe các sự kiện thay đổi.

Bạn truy xuất dữ liệu meta từ đối tượng vehicle hoặc deliveryVehicle bằng nhà cung cấp vị trí. Thông tin meta bao gồm thời gian đến dự kiến (ETA) và khoảng cách còn lại trước khi xe đón 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 nhà cung cấp vị trí.

Ví dụ sau đây cho biết cách lắng nghe 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ụ đã 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 JavaScript Chia sẻ hành trình, hãy khởi chạy chế độ xem bản đồ và thêm chế độ xem đó vào trang HTML. Trang của bạn phải chứa một <div> phần tử giữ chế độ xem bản đồ. Phần tử <div> được đặt 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ụ đã 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 một chiếc xe

Để dừng theo dõi một chiếc xe, bạn cần xoá xe đó khỏi nhà cung cấp vị trí và xoá nhà cung cấp vị trí khỏi chế độ xem 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à nhiệm vụ đã lên lịch.

Xoá một chiếc xe khỏi nhà cung cấp vị trí

Để ngăn nhà cung cấp vị trí theo dõi một chiếc xe, hãy xoá mã xe giao hàng khỏi nhà cung cấp vị trí.

Chuyến đi theo yêu cầu

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

Nhiệm vụ đã lên lịch

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

Xoá nhà cung cấp vị trí khỏi chế độ xem bản đồ

Ví dụ sau đây cho biết cách xoá nhà cung cấp vị trí khỏi chế độ xem bản đồ.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

Bước tiếp theo