最后一公里舰队解决方案目前仅向部分客户提供。如需了解详情，请与销售人员联系。

此页面由 Cloud Translation API 翻译。

使用 JavaScript 物流跟踪库跟踪运单

借助 JavaScript 货运跟踪库，您可以直观呈现 Fleet Engine 中跟踪的车辆位置和感兴趣的位置。该库包含一个 JavaScript 地图组件，可直接替换标准 google.maps.Map 实体和数据组件，以便与 Fleet Engine 连接。借助 JavaScript 货运跟踪库，您可以通过自己的 Web 应用提供可自定义、动画形式的货运跟踪体验。

组件

JavaScript 货运跟踪库提供了一些组件，用于在车辆到达目的地时直观呈现车辆和路线，以及司机预计到达时间或剩余行驶距离的原始数据 Feed。

货运跟踪地图视图

地图视图组件可直观呈现车辆和目的地的位置。如果车辆的路线已知，地图视图组件会在该车辆沿预测路径移动时为其添加动画效果。

发货地点提供商

配送地点提供商将所跟踪对象的位置信息馈送到配送跟踪地图中，以便跟踪第一公里和最后一公里的物流信息。

您可以使用配送地址提供商跟踪以下信息：

货物的自提或送货地点。
送货车辆的位置和路线。

跟踪的位置对象

位置信息提供程序会跟踪车辆和目的地等对象的位置。

目标位置

目的地是指旅程的结束地点。对于货运跟踪，这是计划任务位置。

车辆位置

车辆位置是指跟踪的车辆位置。可以选择包含车辆的路线。

身份验证令牌提取工具

如需控制对存储在 Fleet Engine 中的位置数据的访问权限，您必须在服务器上为 Fleet Engine 实现 JSON Web 令牌 (JWT) 创建服务。然后，使用 JavaScript 历程共享库实现身份验证令牌提取器（作为您的 Web 应用的一部分），对位置数据的访问权限进行身份验证。

样式选项

标记和多段线样式决定了地图上跟踪的地点对象的外观和风格。您可以使用自定义样式选项来更改默认样式，使其与 Web 应用的样式相匹配。

控制所跟踪位置的可见性

本部分介绍了地图上所跟踪对象的可见性控制。这些规则适用于两类对象：

地点标记
任务数据

位置标记的可见性

出发地和目的地的所有位置标记始终显示在地图上。例如，无论配送状态如何，发货地点始终显示在地图上。

任务数据可见性

本部分介绍了适用于任务数据（例如车辆位置和剩余路线）的默认可见性规则。您可以自定义许多任务，但并非所有任务：

不可用任务 -- 您无法自定义这些任务的可见性。
正在进行的车辆任务 - 您可以自定义这类任务。
无效的车辆任务 - 您无法自定义这些任务的公开范围。

不可用任务

如果跟踪任务的路线上至少有一项不可用的任务（例如，如果驾驶员正在休息或车辆正在加油），车辆将不可见。预计到达时间和预计任务完成时间仍然可用。

正在进行的车辆任务

TaskTrackingInfo 对象提供了许多可在配送跟踪库中显示的数据元素。默认情况下，当任务分配给车辆时，以及车辆在任务的 5 站范围内时，这些字段均可见。当任务完成或取消时，可见性即告结束。这些字段如下所示：

路线多段线
预计到达时间
预计任务完成时间
到任务地点的剩余行驶距离
剩余经停点数
车辆位置

在 Fleet Engine 中创建或更新任务时，您可以为任务设置 TaskTrackingViewConfig，从而为每个任务自定义可见性配置。这样可以根据以下条件（以下称为可见性选项）创建关于各个数据元素何时可用的规则：

剩余经停点数
预计到达时间前的时长
剩余行驶距离
始终显示
一律不显示

请注意，每个数据元素只能与一个可见性选项相关联。无法使用 OR 或 AND 条件来组合条件。

自定义示例如下所示。该自定义的规则如下：

如果车辆在 3 个经停点范围内，则显示路线多段线。
如果剩余行驶距离不足 5000 米，则显示预计到达时间。
不再显示剩余经停点数。
当车辆距离任务 5 个站点不到时，其他每个字段都将保持默认的显示设置。

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

您还可以通过与支持团队联系来自定义项目的默认可见性配置。

路线多段线和车辆位置可见性规则：

如果路线多段线可见，车辆位置也必须可见，否则可通过多段线的末端指示车辆位置。这意味着，路线多段线的可见性选项不能受到限制。

必须遵循以下规则，才能提供有效的路线多段线 / 车辆位置可见性组合：

当路线多段线和车辆位置具有相同的可见性选项类型时：
- 如果可见性选项是剩余停靠点数、预计到达时间之前所用的时间或剩余行驶距离，路线多段线必须提供的值应小于或等于为车辆位置针对此可见性选项设置的值。示例如下：
```
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
```
- 如果路线多段线具有始终可见的可见性选项，则车辆位置还必须提供始终可见的可见性选项。
- 如果车辆位置具有一律不显示的可见性选项，则路线多段线还必须提供一律不显示的可见性选项。
如果路线多段线和车辆位置具有不同的可见性选项类型，则只有在同时满足其可见性选项时，车辆位置才会显示。

示例如下：
```
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingDrivingDistanceMetersThreshold": 3000
  },
}
```
在此示例中，只有在剩余经停次数至少为 3 次且剩余行驶距离至少为 3000 米时，车辆位置才可见。

开始使用 JavaScript 历程共享库

在使用 JavaScript 历程共享库之前，请确保您熟悉 Fleet Engine 和获取 API 密钥。

如需跟踪送货情况，请先创建跟踪 ID 声明。

创建跟踪 ID 声明

如需使用发货位置提供程序跟踪运单，请创建带有跟踪 ID 声明的 JSON 网络令牌 (JWT)。

要创建 JWT 载荷，请使用键 trackingid 在授权部分额外添加一个声明。将其值设置为配送跟踪 ID。

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

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "trackingid": "tid_54321",
   }
}

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

您可以创建身份验证令牌提取程序，以使用项目的服务帐号证书检索服务器上使用适当声明创建的令牌。请务必在您的服务器上创建令牌，切勿在任何客户端上共享您的证书。否则，会危及系统的安全性。

提取程序必须返回包含两个字段的数据结构，并封装在 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 参数会在 API 加载后执行 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
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

TypeScript

locationProvider =
    new google.maps.journeySharing
        .FleetEngineShipmentLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify tracking ID to
          // immediately start tracking.
          trackingId: 'your-tracking-id',
});

初始化地图视图

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

为避免出现竞态条件，请在地图初始化后调用的回调中设置位置信息提供程序的跟踪 ID。

JavaScript

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

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-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({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);

跟踪 ID

向位置信息提供程序提供的跟踪 ID 可能对应于多项任务；例如，同一包裹的自提和送货任务，或多次失败的配送尝试。已选择一项任务显示在配送跟踪地图上。要显示的任务按如下方式确定：

如果只有一个待处理的自提任务，系统会显示该任务。如果存在多个待处理的取货任务，系统会生成错误。
如果只有一个待处理的传送任务，系统会显示该任务。如果存在多个待处理的传送任务，则会生成错误。
如果有已关闭的配送任务：
- 如果只有一个已关闭的配送任务，则会显示。
- 如果有多项已关闭的传送任务，系统会显示结果时间最近的那项。
- 如果存在多个已关闭的交付任务，并且这些任务没有结果时间，则生成错误。
如果有已关闭的自提任务，请执行以下操作：
- 如果只有一个已关闭的自提任务，系统会显示该任务。
- 如果存在多个已关闭的取货任务，系统会显示到达时间最近的那项。
- 如果存在多个已关闭的取货任务，并且所有任务没有结果时间，则系统会生成错误。
否则，系统不会显示任何任务。

监听更改事件

您可以使用位置信息提供程序从任务跟踪信息对象中检索有关任务的元信息。元信息包括预计到达时间、剩余经停点数和自提或送餐前的剩余距离。对元信息的更改会触发 update 事件。以下示例展示了如何监听这些更改事件。

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  // e.taskTrackingInfo contains data that may be useful
  // to the rest of the UI.
  console.log(e.taskTrackingInfo.remainingStopCount);
});

处理错误

因请求运送信息而异步出现的错误会触发 error 事件。以下示例展示了如何监听这些事件以处理错误。

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

注意：请务必将库调用封装在 try...catch 块中，以处理意外错误。

停止跟踪

如需让营业地点提供商停止跟踪运单，请从营业地点提供商中移除跟踪 ID。

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

使用云端地图样式设置

借助云端地图样式设置功能，您可以通过 Google Cloud 控制台为使用 Google 地图的所有应用创建和修改地图样式，而无需对代码进行任何更改。地图样式会以地图 ID 的形式保存到您的 Cloud 项目中。如需将样式应用于 JavaScript 物流跟踪地图，请在创建 JourneySharingMapView 时指定 mapId。在 JourneySharingMapView 实例化后，无法更改或添加 mapId 字段。以下示例展示了如何启用之前创建的具有地图 ID 的地图样式。

JavaScript

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

TypeScript

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

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

自定义地图样式的另一种方法是，在创建 JourneySharingMapView 时设置 mapOptions。

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 对象，该对象将应用于相同类型的所有标记。对象中指定的更改会在创建每个标记后应用，覆盖所有默认选项。

更高级的选项是指定自定义函数。借助自定义函数，您可以根据数据设置标记的样式，以及为标记添加互动性，例如点击处理。具体来说，物流跟踪会将与标记所代表的对象类型（车辆或目的地）相关的数据传递给自定义函数。这样一来，标记样式可以根据标记元素本身的当前状态而变化；例如，到目的地为止的计划剩余经停次数。您甚至可以联接来自 Fleet Engine 外部来源的数据，并根据该信息设置标记样式。

配送跟踪库在 FleetEngineShipmentLocationProviderOptions 中提供以下自定义参数：

使用 `MarkerOptions` 更改标记的样式

以下示例展示了如何使用 MarkerOptions 对象配置车辆标记的样式设置。遵循此模式，使用上面列出的任何标记自定义设置来自定义任何标记的样式。

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

以下示例展示了如何配置车辆标记的样式设置。您可以按照此模式使用上面列出的任一标记自定义参数来自定义任何标记的样式。

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

向标记添加点击处理

以下示例展示了如何向车辆标记添加点击处理。请按照此模式使用上面列出的任意标记自定义参数向任意标记添加点击处理方式。

JavaScript

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

TypeScript

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

使用自定义多段线

借助配送跟踪库，您还可以在地图上自定义配送路线的外观和风格。该库会为运单的有效或剩余路径中的每对坐标创建一个 google.maps.Polyline 对象。您可以指定多段线自定义项，以设置 Polyline 对象的样式。然后，该库会在两种情况下应用这些自定义设置：将对象添加到地图之前，以及用于对象的数据发生更改时。

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

同样，您可以指定自定义函数。借助自定义函数，您可以根据 Fleet Engine 发送的数据对对象进行单独的样式设置。该函数可以根据运单的当前状态更改每个对象的样式；例如，将 Polyline 对象的颜色设置为较深的阴影，或在车辆行驶速度较慢时增加该对象的样式。您甚至可以从 Fleet Engine 外部的来源进行联接，并根据该信息设置 Polyline 对象的样式。

您可以使用 FleetEngineShipmentLocationProviderOptions 中提供的参数指定自定义设置。您可以为车辆行程中的不同路径状态（已行驶、正在行驶或尚未行驶）设置自定义设置。具体参数如下所示：

takenPolylineCustomization，表示已经走过的路径；
activePolylineCustomization，表示主动行驶路径；
remainingPolylineCustomization，表示尚未经过的路径。

使用 `PolylineOptions` 更改 `Polyline` 对象的样式

以下示例展示了如何使用 PolylineOptions 配置 Polyline 对象的样式。遵循此模式，使用前面列出的多段线自定义设置来自定义任何 Polyline 对象的样式。

JavaScript

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

TypeScript

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

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

以下示例展示了如何配置活跃 Polyline 对象的样式设置。遵循此模式，使用前面列出的多段线自定义参数来自定义任何 Polyline 对象的样式。

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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});

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  infoWindow.setContent(
      `Your vehicle is ${stopsCount} stops away.`);

  // 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 货运跟踪库替换包含标记或其他自定义设置的现有地图，而不会丢失这些自定义设置。

例如，假设您有一个网页，其中包含一个显示标记的标准 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 历程共享库，请执行以下操作：

添加身份验证令牌工厂的代码。
在 initMap() 函数中初始化位置信息提供程序。
在 initMap() 函数中初始化地图视图。视图包含地图。
将您的自定义设置移到地图视图初始化的回调函数中。
将位置信息库添加到 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.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    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
  });

  locationProvider.trackingId = TRACKING_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.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

如果您在乌鲁鲁附近有跟踪的包裹（具有指定 ID），则该包裹现在将呈现在地图上。

使用 JavaScript 物流跟踪库跟踪运单

组件

货运跟踪地图视图

发货地点提供商

跟踪的位置对象

目标位置

车辆位置

身份验证令牌提取工具

样式选项

控制所跟踪位置的可见性

位置标记的可见性

任务数据可见性

不可用任务

正在进行的车辆任务

路线多段线和车辆位置可见性规则：

开始使用 JavaScript 历程共享库

创建跟踪 ID 声明

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

JavaScript

TypeScript

从 HTML 加载地图

关注运单

实例化配送地点提供商

JavaScript

TypeScript

初始化地图视图

JavaScript

TypeScript

跟踪 ID

监听更改事件

JavaScript

TypeScript

处理错误

JavaScript

TypeScript

停止跟踪

JavaScript

TypeScript

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

JavaScript

TypeScript

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

使用云端地图样式设置

JavaScript

TypeScript

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

JavaScript

TypeScript

使用自定义标记

使用 MarkerOptions 更改标记的样式

JavaScript

TypeScript

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

JavaScript

TypeScript

向标记添加点击处理

JavaScript

TypeScript

使用自定义多段线

使用 PolylineOptions 更改 Polyline 对象的样式

JavaScript

TypeScript

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

JavaScript

TypeScript

控制 Polyline 对象的可见性

JavaScript

TypeScript

为车辆或位置标记显示 InfoWindow

JavaScript

TypeScript

停用自动调整

JavaScript

TypeScript

替换现有地图

使用 `MarkerOptions` 更改标记的样式

使用 `PolylineOptions` 更改 `Polyline` 对象的样式

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

控制 `Polyline` 对象的可见性

为车辆或位置标记显示 `InfoWindow`