查看舰队

本部分介绍了如何使用 JavaScript 舰队跟踪库查看舰队。这些程序假定您已设置舰队跟踪库并加载了地图。如需了解详情，请参阅设置 JavaScript 舰队跟踪库。

本文档讨论了在查看舰队时可以执行的以下操作：

开始跟踪舰队。
监听事件并处理错误。
停止跟踪。
在查看舰队时跟踪单辆车辆。

开始跟踪舰队

如需跟踪舰队，您需要实例化舰队位置信息提供方，并为地图视口设置位置限制，如以下部分所述。

实例化舰队位置信息提供方

JavaScript 舰队跟踪库包含一个位置信息提供方，该提供方会从 Fleet Engine 中提取多辆车辆。

如需实例化该提供方，请按以下步骤操作：

使用您的项目 ID 以及对令牌提取器的引用。
使用车辆过滤条件查询 车辆过滤条件查询用于控制地图显示哪些车辆。过滤条件会传递给 Fleet Engine。
- 对于按需服务，请使用 vehicleFilter，并查看 ListVehiclesRequest.filter
- 对于计划任务，请使用 deliveryVehicleFilter，并查看 ListDeliveryVehiclesRequest.filter
设置车辆显示边界 。使用 locationRestriction 限制在地图上显示车辆的区域。在设置此项之前，位置信息提供方不会处于活动状态。您可以在构造函数中或构造函数之后设置位置边界。
初始化地图视图 。

以下示例展示了如何针对按需和计划任务场景实例化舰队位置信息提供方。这些示例还展示了如何在构造函数中使用 locationRestriction 使位置信息提供方处于活动状态。

按需行程

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"',
        });

计划任务

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"',
        });

如需在构造函数之后设置 locationRestriction，请稍后在代码中添加 locationProvider.locationRestriction，如以下 JavaScript 示例所示。

   // 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,
   };

使用地图视口设置位置限制

您还可以将 locationRestriction 边界设置为与地图视图中当前可见的区域相匹配。

按需行程

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

计划任务

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

初始化地图视图

构造位置信息提供方后，请按照与跟踪单辆车辆时相同的方式初始化地图视图。

加载 JavaScript 行程共享库后，初始化地图视图并将其添加到 HTML 页面。您的页面应包含一个 <div> 元素，用于保存地图视图。在以下示例中，<div> 元素名为 map_canvas。=

按需行程

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

计划任务

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

监听事件并处理错误

开始跟踪舰队后，您需要监听事件更改并处理出现的任何错误，如以下部分所述。

监听更改事件

您可以使用位置信息提供方从车辆对象检索有关舰队的元信息。元信息的更改会触发 update 事件。元信息包括车辆属性，例如导航状态、剩余距离和自定义属性。

如需了解详情，请参阅以下内容：

以下示例展示了如何监听这些更改事件。

按需行程

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

计划任务

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

监听错误

您还需要监听并处理在跟踪车辆时发生的错误。异步请求车辆信息时出现的错误会触发错误事件。

以下示例展示了如何监听这些事件，以便您可以处理错误。

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

停止跟踪舰队

如需停止跟踪舰队，请将位置信息提供方的边界设置为 null，然后从地图视图中移除位置信息提供方，如以下部分所述。

将位置信息提供方边界设置为 null

如需阻止位置信息提供方跟踪舰队，请将位置信息提供方的边界设置为 null。

按需行程

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

计划任务

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

从地图视图中移除位置信息提供方

以下示例展示了如何从地图视图中移除位置信息提供方。

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

在查看配送舰队时跟踪配送车辆

如果您将移动服务用于计划任务，则可以在同一地图视图中查看舰队，并显示特定配送车辆的路线和即将执行的任务。为此，请同时实例化配送舰队位置信息提供方和配送车辆位置信息提供方，并将它们都添加到地图视图中。实例化后，配送车队位置信息提供方会开始在地图上显示配送车辆。以下示例展示了如何实例化这两个位置信息提供方：

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

使用标记自定义功能跟踪配送车辆

如需让配送车辆位置信息提供方在您点击舰队标记时跟踪配送车辆，请按以下步骤操作：

自定义标记并添加点击操作。
隐藏标记以防止重复标记。

注意：配送车队位置信息提供方会呈现一组标记，每个标记对应一辆跟踪的车辆。如果您希望在用户点击某辆车辆时显示该车辆的详细信息，请实例化配送车辆位置信息提供方，并将车辆 ID 设置为用户点击的车辆 ID，如以下示例所示。但是，执行此操作时，配送车辆位置信息提供方也会呈现此车辆的标记（这是其设计用途）。因此，您需要隐藏其中一个标记，以避免同一车辆出现两个标记。

以下部分提供了这些步骤的示例。

自定义标记并添加点击操作

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

隐藏标记以防止重复标记

隐藏配送车辆位置信息提供方的标记，以防止同一车辆呈现两个标记：

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

后续步骤

为地图设置样式

查看舰队 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

开始跟踪舰队

实例化舰队位置信息提供方

按需行程

JavaScript

TypeScript

计划任务

JavaScript

TypeScript

使用地图视口设置位置限制

按需行程

JavaScript

TypeScript

计划任务

JavaScript

TypeScript

初始化地图视图

按需行程

JavaScript

TypeScript

计划任务

JavaScript

TypeScript

监听事件并处理错误

监听更改事件

按需行程

JavaScript

TypeScript

计划任务

JavaScript

TypeScript

监听错误

JavaScript

TypeScript

停止跟踪舰队

将位置信息提供方边界设置为 null

按需行程

JavaScript

TypeScript

计划任务

JavaScript

TypeScript

从地图视图中移除位置信息提供方

JavaScript

TypeScript

在查看配送舰队时跟踪配送车辆

JavaScript

TypeScript

使用标记自定义功能跟踪配送车辆

自定义标记并添加点击操作

JavaScript

TypeScript

隐藏标记以防止重复标记

JavaScript

TypeScript

后续步骤

查看舰队