JavaScript 版 Consumer SDK 使用入门

JavaScript SDK 可让您直观地查看 Fleet Engine 中跟踪的车辆和感兴趣的位置。图书馆 包含可直接替换的 JavaScript 地图组件 标准 google.maps.Map 实体和数据组件进行连接 Fleet Engine通过使用 JavaScript SDK 您可以通过 Web 应用提供可自定义的动画行程和订单进度体验。

组件

JavaScript SDK 提供了用于实现可视化的组件 车辆和航点，以及司机预计到达时间的原始数据 Feed 或剩余的行驶距离。

行程和订单进度地图视图

地图视图组件可直观呈现车辆和航点的位置。 如果车辆的路线已知，地图视图组件会以动画形式呈现 在车辆沿预测路径移动时，预测该车辆的位置。

行程位置信息提供程序

JavaScript SDK 包含行程地点 将所跟踪对象的位置信息馈送到 行程和订单进度图

您可以使用行程位置信息提供程序跟踪以下信息：

• 行程的上车点或下车点。
• 分配给行程的车辆的位置和路线。

跟踪的位置对象

位置提供程序会跟踪对象（如航点和车辆）的位置。

出发地

出发地是旅程的起点。标记 上车地点。

目标位置

目的地是指旅程的结束地点。 它标记着下车点。

航点位置

航点位置是所跟踪行程路线上的任意位置。 例如，公交路线上的每个经停点都是一个航点位置。

车辆位置

车辆位置是指跟踪的车辆位置。它可能会选择性地 添加车辆的路线。

身份验证令牌提取工具

要控制对存储在 Fleet Engine 中的位置数据的访问权限，您必须 为 Fleet Engine 实现 JSON Web 令牌 (JWT) 创建服务 。然后，实现身份验证令牌提取器（作为 定义自己的 Web 应用 对位置数据的访问权限进行身份验证。

样式选项

标记和多段线样式决定了 在地图上跟踪的地点对象。您可以使用 自定义样式选项，用于更改默认样式以匹配样式 代码。

控制所跟踪位置的可见性

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

交通工具

从分配给行程的拼车车辆开始 到下车点。如果行程已取消，车辆将不再可见。

所有其他地点标记

起点、终点和航点的其他所有位置标记均为 始终显示在地图上。例如，拼车下车点 或某个送货地点始终显示在地图上 行程或送货的状态。

JavaScript SDK 使用入门

在使用 JavaScript SDK 之前，请确保 熟悉 Fleet Engine 以及获取 API 密钥。

如需跟踪拼车行程，请先创建行程 ID 版权主张。

创建行程 ID 申领

如需使用行程位置信息提供程序跟踪行程，请执行以下操作： 创建带有行程 ID 声明的 JSON 网络令牌 (JWT)。

要创建 JWT 载荷，请在“授权”部分添加额外的声明 键 tripid，并将其值设置为行程 ID。

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

{
  "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": {
     "tripid": "tid_12345",
   }
}

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

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

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

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

JavaScript 使用方 SDK 通过身份验证令牌请求令牌 出现以下任一情况时调用提取器：

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

否则，SDK 会使用之前发放的仍然有效的令牌，且不会 调用抓取工具。

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

JavaScript

async 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.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

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

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

从 HTML 加载地图

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

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

在旅行后

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

实例化行程位置信息提供程序

JavaScript SDK 预定义了一个位置信息提供程序 。使用您的项目 ID 和 对令牌工厂的引用，以对其进行实例化。

JavaScript

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

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

TypeScript

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

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

初始化地图视图

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

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

JavaScript

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

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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);

监听更改事件

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

JavaScript

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

TypeScript

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

处理错误

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

JavaScript

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

TypeScript

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

注意：请确保将库调用封装在 try...catch 块中 处理意料之外的错误。

停止跟踪

如需让位置信息提供程序停止跟踪行程，请从以下位置移除行程 ID： 位置信息提供程序。

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

使用云端地图样式设置

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

JavaScript

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

TypeScript

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

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

自定义地图样式的另一种方法是 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 SDK，您可以自定义添加到 地图。为此，您可以指定标记自定义，即 然后，在向地图添加标记之前应用 JavaScript SDK， 标记更新。

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

更高级的选项是指定自定义函数。自定义 函数支持根据数据设置标记样式， 标记互动，例如点击处理。具体而言，行程和订单 进度功能会将数据传递给自定义函数， 标记表示：车辆、出发地、航点或目的地。这样，您就可以 标记样式，可根据标记元素的当前状态而变化 本身；例如，到车辆结束前剩余的航点数 行程。您甚至可以联接来自 Fleet Engine 外部来源的数据，并 根据该信息设置标记的样式。

JavaScript SDK 在 FleetEngineTripLocationProviderOptions 中提供以下自定义参数：

• vehicleMarkerCustomization
• originMarkerCustomization
• waypointMarkerCustomization
• destinationMarkerCustomization

使用 MarkerOptions 更改标记的样式

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

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

TypeScript

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

向标记添加点击处理

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

JavaScript

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

TypeScript

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

使用自定义多段线

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

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

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

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

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

使用 PolylineOptions 更改 Polyline 对象的样式

以下示例展示了如何配置 Polyline 对象的样式 替换为 PolylineOptions。 遵循此模式可使用任意属性自定义任何 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.trip.remainingWaypoints[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: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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 =
  FleetEngineTripLocationProvider.
      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) => {
    FleetEngineTripLocationProvider.
        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 =
  FleetEngineTripLocationProvider.
      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: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        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});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  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.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  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

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

替换现有地图

您可以使用 JavaScript SDK 将 包含标记或其他自定义项的现有地图 而不会丢失这些自定义设置

例如，假设您有一个包含标准 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, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, 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 SDK，请执行以下操作：

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
async 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.FleetEngineTripLocationProvider({
    projectId: "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.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, 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 SDK 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 位于乌鲁鲁附近，现在地图上就会呈现该 ID。