按需约车和送货解决方案目前仅面向特定合作伙伴提供。如需了解详情，请与销售人员联系。

此页面由 Cloud Translation API 翻译。

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

借助 JavaScript 车队跟踪库，您可以近乎实时地直观呈现车队中车辆的位置。该库使用 On Demand Rides and Deliveries API 实现车辆和行程的可视化。JavaScript 舰队跟踪库包含一个 JavaScript 地图组件，该组件是标准 google.maps.Map 实体和数据组件的直接替换组件，用于与 Fleet Engine 连接。

组件

JavaScript 车队跟踪库提供了用于直观呈现车辆和行程航点的组件，以及预计到达时间或行程剩余距离的原始数据 Feed。

舰队跟踪地图视图

车队跟踪地图视图组件可以直观呈现车辆的位置和行程航点。如果车辆的路线已知，地图视图组件会在车辆沿预测路径移动时为车辆添加动画效果。

舰队跟踪地图视图示例

位置信息提供程序

位置信息提供程序会处理存储在 Fleet Engine 中的信息，将所跟踪对象的位置信息发送到行程共享地图。

车辆位置信息提供程序

车辆位置信息提供程序会显示单辆车的位置信息。其中包含有关车辆位置和分配给车辆的当前行程的信息。

舰队位置信息提供程序

车队位置信息提供程序会显示多辆车的位置信息。您可以进行过滤以显示特定车辆及其位置，也可以显示整个车队的车辆位置。

控制所跟踪位置的可见性

对于 Fleet Engine 位置信息提供程序，可见性规则可确定所跟踪的位置对象何时在地图上可见。注意 - 使用自定义或派生位置信息提供程序可能会更改可见性规则。

车辆

在 Fleet Engine 中创建车辆后，车辆会立即显示；当 Vehicle_state 为 Online 时，车辆则可见。这意味着，即使当前未给车辆分配行程，车辆仍然可见。

航点位置标记

航点位置标记用于指示车辆行程沿途的点，起点为出发地，终点为最终目的地。航点位置标记可按如下方式定义：

Origin - 指示车辆行程的起始位置
中级 - 表示车辆行程中途停留
目的地 - 表示车辆行程的最终位置

规划中的车辆航点在地图上显示为出发地、中间和目的地标记。

JavaScript 舰队跟踪库使用入门

在使用 JavaScript 舰队跟踪库之前，请确保您熟悉 Fleet Engine 并获取 API 密钥。然后创建行程 ID 和车辆 ID 申领。

创建行程 ID 和车辆 ID 申领

如需使用车辆位置信息提供程序跟踪车辆，请创建包含行程 ID 和车辆 ID 声明的 JSON Web 令牌 (JWT)。

如需创建 JWT 载荷，请使用 tripid 和 vehicleid 键在授权部分添加额外的声明，并将每个密钥的 value 设置为 *。应使用 Fleet Engine Service Super User Cloud IAM 角色创建令牌。请注意，这会授予创建、读取和修改 Fleet Engine 实体的广泛访问权限，并且只能与可信用户共享。

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

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

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

如果存在以下任一情况，JavaScript 舰队跟踪库就会使用身份验证令牌提取程序请求令牌：

它没有有效的令牌，例如，当它在新的网页加载时未调用提取器，或者提取器未返回令牌时。
之前提取的令牌已过期。
之前提取的令牌将在过期后的 1 分钟内完成。

否则，库会使用之前签发的仍然有效的令牌，并且不会调用提取器。

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

提取程序必须返回一个包含两个字段的数据结构，并封装在 Promise 中：

一个字符串 token。
数字 expiresInSeconds。令牌在提取后在这段时间内过期。

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

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/driver/VEHICLE_ID
- https://SERVER_URL/token/consumer/TRIP_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&v=beta" defer></script>

跟随车辆

本部分介绍了如何使用 JavaScript 车队跟踪库跟踪车辆。在运行代码之前，请务必从脚本标记中指定的回调函数加载库。

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

JavaScript 车队跟踪库为 On Demand Rides and Deliveries API 预定义了一个位置信息提供程序。使用您的项目 ID 和对令牌工厂的引用来对其进行实例化。

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

初始化地图视图

加载 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 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 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.
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // Any undefined styling options will use defaults.
});

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

监听更改事件

您可以使用位置信息提供程序从 vehicle 对象中检索有关车辆的元信息。元信息包含预计到达时间以及车辆下次上车点或下车点前的剩余距离。对元信息的更改会触发 update 事件。以下示例展示了如何监听这些更改事件。

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

监听错误

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

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.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

查看车队

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

实例化车队位置信息提供程序

JavaScript 车队跟踪库预先定义了一个位置信息提供程序，用于从 On Demand Rides and Deliveries API 中提取多辆车。您可以使用您的项目 ID 以及对令牌提取器的引用来对其进行实例化。

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

vehicleFilter 指定用于过滤地图上显示的车辆的查询。此过滤器会直接传递给 Fleet Engine。如需了解支持的格式，请参阅 ListVehiclesRequest。

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

监听更改事件

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

JavaScript

locationProvider.addListener('update', e => {
  // 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);
    }
  }
});

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

监听错误

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

停止跟踪

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

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

TypeScript

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

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

自定义地图样式的另一种方法是，在创建 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 Tracking 会将与标记所代表的对象类型（车辆、停车点或任务）相关的数据传递给自定义函数。这样一来，标记样式可以根据标记元素本身的当前状态（例如，剩余停靠站数量或任务类型）发生变化。您甚至可以联接来自 Fleet Engine 外部来源的数据，并根据该信息设置标记样式。

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

不过，出于性能原因，我们建议您使用位置信息提供程序中的原生过滤功能（例如 FleetEngineFleetLocationProvider.vehicleFilter）进行过滤。也就是说，如果您需要额外的过滤功能，则可以使用自定义函数来应用过滤。

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

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

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

向标记添加点击处理

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

JavaScript

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

TypeScript

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

过滤可见标记

以下示例展示了如何过滤可见的车辆标记。请遵循此模式，使用上面列出的任何标记自定义参数过滤所有标记。

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

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

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

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

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

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

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.vehicle.waypoints[0].distanceMeters;
    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: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    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};

渲染可感知流量的 `Polyline` 对象

Fleet Engine 会返回后续车辆的有效路径和剩余路径的交通速度数据。您可以使用此信息，根据 Polyline 对象的车流速度为其设置样式：

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

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

您可以使用 InfoWindow 显示有关车辆或位置标记的更多信息。

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

JavaScript

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

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

    // 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 vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 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 Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // 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 Oracle Park
        var marker = new google.maps.Marker({ position: oraclePark, 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. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          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.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

          // The location of Oracle Park
          var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
          // 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 Oracle Park
          var marker = new google.maps.Marker({position: oraclePark, 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&v=beta"
    ></script>
  </body>
</html>

如果您在 Oracle 公园附近使用指定 ID 驾驶车辆，相应车辆将呈现在地图上。

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

组件

舰队跟踪地图视图

位置信息提供程序

车辆位置信息提供程序

舰队位置信息提供程序

控制所跟踪位置的可见性

车辆

航点位置标记

JavaScript 舰队跟踪库使用入门

创建行程 ID 和车辆 ID 申领

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

JavaScript

TypeScript

从 HTML 加载地图

跟随车辆

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

JavaScript

TypeScript

初始化地图视图

JavaScript

TypeScript

监听更改事件

JavaScript

TypeScript

监听错误

JavaScript

TypeScript

停止跟踪

JavaScript

TypeScript

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

JavaScript

TypeScript

查看车队

实例化车队位置信息提供程序

JavaScript

TypeScript

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

JavaScript

TypeScript

监听更改事件

JavaScript

TypeScript

监听错误

停止跟踪

JavaScript

TypeScript

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

JavaScript

TypeScript

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

使用云端地图样式设置

JavaScript

TypeScript

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

JavaScript

TypeScript

使用自定义标记

使用 MarkerOptions 更改标记的样式

JavaScript

TypeScript

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

JavaScript

TypeScript

向标记添加点击处理

JavaScript

TypeScript

过滤可见标记

JavaScript

TypeScript

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

使用 PolylineOptions 更改 Polyline 对象的样式

JavaScript

TypeScript

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

JavaScript

TypeScript

控制 Polyline 对象的可见性

JavaScript

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

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

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

控制 `Polyline` 对象的可见性

渲染可感知流量的 `Polyline` 对象

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