使用 JavaScript 舰队跟踪库跟踪舰队

利用 JavaScript 舰队跟踪库，您可以直观地了解 实时监控车辆数量。该库使用 Deliveries API 以便直观查看送货车辆和任务。例如 JavaScript 物流跟踪库 其中包含可直接替换的 JavaScript 地图组件 标准 google.maps.Map 实体和数据组件进行连接 Fleet Engine

组件

JavaScript 舰队跟踪库提供可视化组件 以及预计到达时间或剩余时间的原始数据 Feed 距离。

舰队跟踪地图视图

舰队跟踪地图视图组件直观呈现了 车辆和任务的位置。如果车辆的路线已知， 地图视图组件会在该交通工具沿预测路径移动时为其添加动画效果。

位置信息提供程序

位置信息提供程序使用存储在 Fleet Engine 中的信息来发送位置信息 将跟踪对象的信息传输到旅程共享地图中。

送货车辆位置信息提供商

送货车辆位置信息提供商会显示单个送货车辆的 位置信息。其中包含有关车辆位置和 由交付车辆完成的任务。

派送车队位置信息提供商

送货车队位置信息提供商会显示多辆车的地点 信息。您可以按特定车辆或位置进行过滤，也可以显示 整个舰队。

控制所跟踪位置的可见性

本部分介绍了所跟踪位置对象的可见性规则 地图上显示 Fleet Engine 预定义位置信息提供程序。自定义或派生 位置信息提供程序可能会更改公开范围规则。

送货车辆

在 Fleet Engine 中创建交付车辆后，即可看到它。 无论其任务如何，在整个路由过程中始终可见。

任务地点标记

计划的车辆停靠点在地图上显示为车辆停靠点标记。标记 与车辆的实际显示样式不同 计划停靠站。

任务结果的位置会与任务结果标记一起显示。 结果为“SUCCEEDED”的任务会与成功任务标记一起显示， 而其他所有任务都会显示失败的任务标记。

JavaScript 舰队跟踪库使用入门

在使用 JavaScript 舰队跟踪库之前，请确保您已经 熟悉 Fleet Engine 以及获取 API 密钥。 然后，创建任务 ID 和配送车辆 ID 退款申请。

创建任务 ID 和送货车辆 ID 申领

如需使用送货车辆位置信息提供程序跟踪送货车辆，请执行以下操作： 创建包含任务 ID 和送货车辆 ID 声明的 JSON 网络令牌 (JWT)。

要创建 JWT 载荷，请在“授权”部分添加额外的声明 将键 taskid 和 deliveryvehicleid 搭配使用，并将相应值 设置为 *。您应使用 Fleet Engine 创建令牌 服务超级用户 Cloud IAM 角色。请注意，这会授予广泛访问权限 创建、读取和修改 Fleet Engine 实体的权限，且只能共享 和可信赖的用户共享。

以下示例展示了如何创建用于按车辆进行跟踪的令牌 任务：

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

创建身份验证令牌提取程序

您可以创建身份验证令牌提取程序，以检索创建的令牌 使用相关服务在你的服务器上存储相应的声明 为您的项目提供此证书请务必仅创建令牌 并且绝不会在任何客户端上共享您的证书。否则 就会危及系统的安全性。

抓取工具必须返回数据结构 两个字段，封装在一个 Promise 中：

• 一个字符串 token。
• 数字 expiresInSeconds。令牌的到期时间是 提取。

JavaScript 舰队跟踪库通过身份验证请求令牌 令牌提取器。

• 它没有有效的令牌，例如尚未在 或者提取器未返回令牌时抛出该异常。
• 之前提取的令牌已过期。
• 之前提取的令牌将在过期后的 1 分钟内完成。

否则，库会使用之前发放的仍然有效的令牌，并 不会调用提取程序。

以下示例展示了如何创建身份验证令牌提取程序：

JavaScript

function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.Token,
    expiresInSeconds: data.ExpiresInSeconds
  };
}

TypeScript

function authTokenFetcher(options: {
  serviceType: google.maps.journeySharing.FleetEngineServiceType,
  context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
  // The developer should generate the correct
  // SERVER_TOKEN_URL based on options.
  const response = await fetch(SERVER_TOKEN_URL);
  if (!response.ok) {
    throw new Error(response.statusText);
  }
  const data = await response.json();
  return {
    token: data.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

在实现用于创建令牌的服务器端端点时，请保留 请注意以下几点：

• 端点必须返回令牌的过期时间；在示例中 则将其指定为 data.ExpiresInSeconds。
• 身份验证令牌提取程序必须传递过期时间（以秒为单位， （如示例所示）。
• SERVER_TOKEN_网址 取决于您的后端实现，以下是示例应用后端的网址：
  • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
  • https://SERVER_URL/token/fleet_reader

从 HTML 加载地图

以下示例展示了如何加载 JavaScript 历程分享 库。callback 参数执行 initMap 函数。通过 defer 属性，浏览器可以 在 API 加载的同时继续呈现网页的其余部分

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>

跟踪送货车辆

本部分介绍了如何使用 JavaScript 舰队跟踪库 跟踪送货车辆。请务必 从脚本标记中指定的回调函数加载库 然后再运行代码

实例化送货车辆位置信息提供程序

JavaScript 舰队跟踪库预定义了一个位置信息提供程序 Fleet Engine Deliveries API 版本。使用您的项目 ID 和 对令牌工厂的引用，以对其进行实例化。

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

初始化地图视图

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

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
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],
  // Styling customizations; see below.
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

监听更改事件

您可以从 deliveryVehicle 对象中检索有关任务的元信息 使用位置信息提供程序。元信息包括预计到达时间和 距离下一个上车点或下车点的剩余距离。变更 附加的数据会触发 update 事件。以下示例 显示了如何监听这些更改事件。

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

监听错误

因请求送货车辆信息而异步发生的错误会触发 错误事件。以下示例展示了如何监听这些事件 以便处理错误

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

停止跟踪

如需阻止位置信息提供程序跟踪送货车辆，请移除 从营业地点提供商处获取的送货车辆 ID。

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

查看配送舰队

本部分介绍了如何使用 JavaScript 历程共享库 查看配送舰队的权限。请务必 从脚本标记中指定的回调函数加载库 然后再运行代码

实例化配送舰队位置提供程序

JavaScript 舰队跟踪库预定义了一个位置信息提供程序 从 FleetEngine Deliveries API。 使用您的 项目 ID 以及对令牌提取器的引用以对其进行实例化。

JavaScript

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

TypeScript

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

deliveryVehicleFilter 指定用于过滤上面显示的车辆的查询 地图。此过滤器会直接传递给 Fleet Engine。请参阅 ListDeliveryVehiclesRequest.filter 了解支持的格式。

locationRestriction 用于限制在地图上显示车辆的区域。 它还用于控制是否启用位置跟踪功能。位置跟踪 在设置该属性之前，不会启动。

构建好位置信息提供程序后， 初始化地图视图。

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

您可以配置 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;
    }
  });

监听更改事件

您可以从 deliveryVehicles 中检索有关舰队的元信息 对象使用位置信息提供程序。元信息包括车辆信息 导航状态、剩余距离和自定义属性等属性； 请参阅 参考文档 了解详情。更改元信息会触发 update 事件。通过 以下示例展示了如何监听这些更改事件。

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

监听错误

因请求送货车队信息而异步出现的错误 触发错误事件。如需查看有关如何监听这些事件的示例，请参阅 监听错误。

停止跟踪

如需阻止位置信息提供程序跟踪派送车队，请设置边界 为 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
});

送货车队位置信息提供商开始在 地图。使用标记自定义启用送货车辆位置 provider 在用户点击配送车辆的车队标记时跟踪配送车辆：

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

自定义基本地图的外观和风格

要自定义地图组件的外观和风格，请执行以下操作： 设置地图样式 使用云端工具或直接在代码中设置选项。

使用云端地图样式设置

云端地图样式设置 允许您为使用 Google 地图的任何应用创建和修改地图样式 而无需更改任何代码。 地图样式会以地图 ID 的形式保存到您的 Cloud 项目中。接收者 对 JavaScript 舰队跟踪地图应用样式，指定 mapId JourneySharingMapView.mapId 字段无法更改 或者在实例化 JourneySharingMapView 之后添加。以下 示例显示了如何使用 地图 ID。

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
});

使用基于代码的地图样式设置

自定义地图样式的另一种方法是 mapOptions 创建 JourneySharingMapView。

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

使用自定义标记

借助 JavaScript 舰队跟踪库 添加到地图中的标记。为此，您可以指定标记自定义 在向地图添加标记之前，系统将应用舰队跟踪库 每次标记更新。

最简单的自定义方法是指定 MarkerOptions 对象，该对象将应用于所有同类型标记。变更 对象中指定的所有标记。 覆盖所有默认选项。

更高级的选项是指定自定义函数。自定义 函数支持根据数据设置标记样式， 标记互动，例如点击处理。具体来说，舰队跟踪 用于向自定义函数传递与标记对象类型相关的数据 代表车辆、停靠点或任务。这样一来，标记样式设置便可更改 基于标记元素本身的当前状态；例如， 剩余经停点或任务类型。您甚至可以针对来自不同来源的数据 并根据该信息设置标记的样式。

此外，您还可以使用自定义函数来过滤标记的可见性。 为此，请调用 setVisible(false) 标记上。

不过，出于性能方面的考虑， 位置提供程序中的过滤功能，例如 FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter。 也就是说，如果您需要额外的过滤功能 使用自定义功能进行过滤

舰队跟踪库提供了以下自定义参数：

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

使用 MarkerOptions 更改标记的样式

以下示例展示了如何使用 一个 MarkerOptions 对象。遵循此模式可自定义任何图片的样式 标记。

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

使用自定义函数更改标记的样式

以下示例展示了如何配置车辆标记的样式设置。关注 使用该模式，您可以使用任意标记来自定义 自定义参数。

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

向标记添加点击处理

以下示例展示了如何向车辆标记添加点击处理。 遵照此格式向使用任意标记的任意标记添加点击处理 自定义参数。

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

过滤可见标记

以下示例展示了如何过滤可见的车辆标记。 按照此格式过滤使用任何自定义标记设置的所有标记 参数。

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

在跟随送货车辆时使用自定义多段线

利用 JavaScript 舰队跟踪库，您还可以自定义 地图上所关注车辆路线的感觉。该库会创建一个 google.maps.Polyline 对象（针对车辆的有效或剩余位置中的每对坐标） path。 您可以指定多段线自定义项，以设置 Polyline 对象的样式。通过 库随后会在两种情况下应用这些自定义： 对象传递给地图，以及这些对象所用的数据发生更改的时间。

与标记自定义类似，您可以指定一组 PolylineOptions 会应用于所有匹配的Polyline对象 创建或更新

同样，您可以指定自定义函数。自定义函数 允许根据 Fleet Engine 发送的数据对对象进行单独的样式设置。 该函数可以根据当前车辆更改每个对象的样式 州；例如，为 Polyline 对象着色更深，或 就会变厚。你甚至可以加入 Fleet Engine 之外的源代码，并根据该值设置 Polyline 对象的样式 信息。

您可以使用 FleetEngineDeliveryVehicleLocationProviderOptions。 您可以在车辆的 “旅程”-已经旅行过、正在旅行或尚未旅行过。通过 参数如下：

• takenPolylineCustomization, 表示已经走过的路径；
• activePolylineCustomization, 代表积极前进的路径；
• remainingPolylineCustomization, 寻找尚未走过的路。

使用 PolylineOptions 更改 Polyline 对象的样式

以下示例展示了如何配置 Polyline 对象的样式 替换为 PolylineOptions。 遵循此模式可使用任意属性自定义任何 Polyline 对象的样式， 之前列出的多段线自定义内容。

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

使用自定义函数更改 Polyline 对象的样式

以下示例展示了如何配置有效多段线的样式 对象。按照此格式自定义 使用任何多段线自定义设置任何 Polyline 对象的样式 参数。

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

控制 Polyline 对象的可见性

默认情况下，所有 Polyline 对象均可见。创建一个 Polyline 对象 隐藏，设置其 visible 属性：

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

为车辆或位置标记显示 InfoWindow

您可以使用 InfoWindow 来显示关于车辆或位置标记的其他信息。

以下示例展示了如何创建 InfoWindow 并将其附加到 到车辆标记处。

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.   
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

停用自动调整

您可以阻止地图自动根据车辆调整视口 和预期路线。以下示例 展示了如何在配置历程共享时停用自动拟合 地图视图。

JavaScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

TypeScript

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

替换现有地图

您可以替换包含标记或其他自定义设置的现有地图 而不会丢失这些自定义设置

例如，假设您有一个包含标准 google.maps.Map 的网页 显示标记的实体：

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

要添加包含舰队跟踪的 JavaScript 历程共享库，请执行以下操作：

1. 添加身份验证令牌工厂的代码。
2. 在 initMap() 函数中初始化位置信息提供程序。
3. 在 initMap() 函数中初始化地图视图。视图包含地图。
4. 将您的自定义设置移到地图视图初始化的回调函数中。
5. 将位置信息库添加到 API 加载器。

以下示例展示了要进行的更改：

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
let locationProvider;

// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
  // options is a record containing two keys called 
  // serviceType and context. The developer should
  // generate the correct SERVER_TOKEN_URL and request
  // based on the values of these fields.
  const response = await fetch(SERVER_TOKEN_URL);
      if (!response.ok) {
        throw new Error(response.statusText);
      }
      const data = await response.json();
      return {
        token: data.Token,
        expiresInSeconds: data.ExpiresInSeconds
      };
}

// Initialize and add the map
function initMap() {
  // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    YOUR_PROVIDER_ID,
    authTokenFetcher,
  });

  // (3) Initialize map view (which contains the map).
  const mapView = new google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map'),
    locationProviders: [locationProvider],
    // any styling options
  });

mapView.addListener('ready', () => {
  locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };
}
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

如果您运营配送车辆 指定 ID 位于乌鲁鲁附近，现在地图上就会呈现该 ID。