Xem nhóm thiết bị

Phần này trình bày cách sử dụng thư viện theo dõi nhóm JavaScript để xem một nhóm thiết bị. Những quy trình này giả định rằng bạn đã thiết lập nhóm thiết bị thư viện theo dõi và tải một bản đồ. Để biết thông tin chi tiết, hãy xem Thiết lập thư viện theo dõi nhóm JavaScript.

Tài liệu này thảo luận những việc sau đây mà bạn có thể thực hiện khi xem hệ thống thiết bị:

1. Bắt đầu theo dõi nhóm thiết bị.
2. Nghe các sự kiện và xử lý lỗi.
3. Ngừng theo dõi.
4. Theo dõi một chiếc xe trong khi xem một nhóm xe.

Bắt đầu theo dõi hệ thống thiết bị

Để theo dõi một đội phương tiện, bạn cần tạo thực thể cho một nhà cung cấp vị trí đội xe và đặt giới hạn vị trí cho chế độ xem bản đồ như được mô tả trong phần sau .

Tạo thực thể cho nhà cung cấp vị trí hệ thống thiết bị

Thư viện theo dõi nhóm JavaScript bao gồm một nhà cung cấp vị trí tìm nạp nhiều xe từ Fleet Engine.

Để tạo thực thể, hãy làm theo các bước sau:

1. Sử dụng mã dự án cũng như tham chiếu đến trình tìm nạp mã thông báo của bạn.

2. Sử dụng cụm từ tìm kiếm về bộ lọc xe. Cụm từ tìm kiếm về bộ lọc xe sẽ kiểm soát phương tiện mà bản đồ hiển thị. Bộ lọc được chuyển đến Fleet Engine.

   • Đối với các dịch vụ theo yêu cầu, hãy dùng vehicleFilter và xem lại ListVehiclesRequest.filter
   • Đối với các việc cần làm đã lên lịch, hãy dùng deliveryVehicleFilter và xem lại ListDeliveryVehiclesRequest.filter

3. Thiết lập giới hạn là dành cho màn hình xe. Sử dụng locationRestriction để giới hạn khu vực nơi hiển thị phương tiện di chuyển trên bản đồ. Vị trí sẽ không hoạt động cho đến khi bạn đặt giá trị này. Bạn cũng có thể đặt giới hạn vị trí trong hàm khởi tạo hoặc sau hàm khởi tạo.

4. Khởi chạy chế độ xem bản đồ.

Các ví dụ sau đây minh hoạ cách tạo thực thể cho nhà cung cấp vị trí nhóm thiết bị cho cả tình huống tác vụ theo yêu cầu và tác vụ theo lịch. Những ví dụ này cũng cho biết cách sử dụng locationRestriction trong hàm khởi tạo để tạo trình cung cấp vị trí đang hoạt động.

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

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Việc cần làm đã lên lịch

JavaScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

Để đặt locationRestriction sau hàm khởi tạo, hãy thêm locationProvider.locationRestriction vào lúc khác trong mã của bạn dưới dạng được hiển thị trong ví dụ JavaScript sau.

Lưu ý: Ví dụ này dành cho các tác vụ đã lên lịch, nhưng để thực hiện việc này cho các chuyến đi theo yêu cầu, bạn sẽ chỉ sử dụng google.maps.journeySharing.FleetEngineFleetLocationProvider.

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

Đặt hạn chế vị trí bằng cách sử dụng chế độ xem bản đồ

Bạn cũng có thể đặt giới hạn locationRestriction cho khớp với khu vực hiện tại hiển thị trong chế độ xem bản đồ.

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

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Việc cần làm đã lên lịch

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

Khởi chạy chế độ xem bản đồ

Khi bạn tạo xong trình cung cấp vị trí, hãy khởi chạy chế độ xem bản đồ trong cùng một khi bạn đi theo một chiếc xe.

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

Sau khi bắt đầu theo dõi hệ thống thiết bị, bạn cần phải theo dõi những thay đổi của sự kiện và xử lý mọi lỗi phát sinh như được mô tả trong các phần sau.

Theo dõi các sự kiện thay đổi

Bạn có thể truy xuất siêu thông tin về nhóm xe từ đối tượng xe bằng cách sử dụng trình cung cấp vị trí. Các thay đổi đối với thông tin meta sẽ kích hoạt bản cập nhật sự kiện. Thông tin meta bao gồm các thuộc tính của xe như chỉ đường trạng thái, khoảng cách còn lại và thuộc tính tùy chỉnh.

Để biết thông tin chi tiết, vui lòng tham khảo các nội dung sau:

• Tài liệu tham khảo về các loại xe cho chuyến đi theo yêu cầu
• Tài liệu tham khảo về các lựa chọn xe có nhiệm vụ đã lên lịch

Các ví dụ sau đây minh hoạ 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.vehicles contains data that may be
  // useful to the rest of the UI.
  for (vehicle of e.vehicles) {
    console.log(vehicle.navigationStatus);
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

Việc cần làm đã lên lịch

JavaScript

locationProvider.addListener('update', e => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

Nghe lỗi

Bạn cũng nên lắng nghe và xử lý các lỗi xảy ra khi theo dõi chiếc xe. Lỗi phát sinh không đồng bộ khi yêu cầu xe các sự kiện lỗi kích hoạt thông tin.

Ví dụ sau đây minh hoạ cách nghe những sự kiện này để bạn có thể 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);
});

Dừng theo dõi hệ thống thiết bị

Để ngừng theo dõi nhóm thiết bị, bạn cần đặt giới hạn của trình cung cấp vị trí thành rỗng, và sau đó xóa trình cung cấp vị trí khỏi chế độ xem bản đồ như được mô tả trong các phần sau.

Đặt giới hạn đối với trình cung cấp vị trí thành rỗng

Để ngăn nhà cung cấp vị trí theo dõi nhóm thiết bị, hãy đặt giới hạn của trình cung cấp vị trí thành giá trị rỗng.

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

Việc cần làm đã lên lịch

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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);

Theo dõi xe giao hàng trong khi xem đội xe giao hàng

Nếu đang dùng Dịch vụ di động cho các công việc đã lên lịch, cả hai bạn đều có thể xem nhóm thiết bị cũng như hiển thị tuyến đường và các nhiệm vụ sắp tới cho một xe giao hàng cụ thể ở cùng chế độ xem bản đồ đó. Để thực hiện việc này, hãy tạo thực thể cho cả Vị trí nhóm phân phối Nhà cung cấp và Nhà cung cấp vị trí xe giao hàng, đồng thời thêm cả hai vào bản đồ chế độ xem. Sau khi tạo thực thể, nhà cung cấp vị trí của nhóm giao hàng sẽ bắt đầu hiển thị xe giao hàng trên bản đồ. Các ví dụ sau đây minh hoạ cách tạo thực thể cả hai nhà cung cấp vị trí:

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

Sử dụng tính năng tuỳ chỉnh điểm đánh dấu để theo dõi xe giao hàng

Để cho phép nhà cung cấp vị trí xe giao hàng theo dõi xe giao hàng khi bạn nhấp vào điểm đánh dấu đội xe, hãy làm theo các bước sau:

1. Tuỳ chỉnh điểm đánh dấu và thêm thao tác nhấp.

2. Ẩn điểm đánh dấu để tránh đánh dấu trùng lặp.

   Lưu ý: Nhà cung cấp vị trí của nhóm giao hàng hiển thị một bộ điểm đánh dấu, một cho từng chiếc xe được theo dõi. Nếu bạn muốn hiển thị thông tin chi tiết về một chiếc xe khi người dùng nhấp vào chiếc xe đó, còn bạn sẽ tạo thực thể về vị trí của xe giao hàng và đặt mã xe là mã mà người dùng đã nhấp vào, như được hiển thị trong ví dụ sau. Tuy nhiên, khi bạn làm như vậy, xe giao hàng nhà cung cấp vị trí cũng hiển thị một điểm đánh dấu cho xe này (vì xe được thiết kế) cần làm). Vì vậy, bạn ẩn một trong số chúng để không có hai điểm đánh dấu cho cùng một phương tiện.

Ví dụ cho các bước này nằm trong các phần sau.

Tuỳ chỉnh điểm đánh dấu và thêm thao tác nhấp

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

Ẩn điểm đánh dấu để tránh điểm đánh dấu trùng lặp

Ẩn điểm đánh dấu khỏi nhà cung cấp vị trí xe giao hàng để ngăn hiển thị hai điểm đánh dấu cho cùng một chiếc xe:

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

Các bước tiếp theo

• Tạo kiểu cho bản đồ