フリートを表示する

このセクションでは、JavaScript フリート トラッキング ライブラリの使用方法について説明します。 フリートを表示できます。以下の手順は、フリートがすでに設定されていることを前提としています。 地図を読み込みました詳しくは、 JavaScript フリート トラッキング ライブラリを設定します。

このドキュメントでは、広告スペースを表示しているときに行える次の事項について説明します。 フリート:

1. フリートの追跡を開始します。
2. イベントをリッスンしてエラーを処理する。
3. 追跡を停止します。
4. フリートを表示しながら 1 台の車両を追跡する。

かん隊の追跡を開始する

フリートを追跡するには、フリート ロケーション プロバイダをインスタンス化し、 地図のビューポートに場所の制限を設定する方法については、 できます。

フリート ロケーション プロバイダをインスタンス化する

JavaScript のフリート トラッキング ライブラリには、 Fleet Engine から複数の車両を取得します。

これをインスタンス化する手順は次のとおりです。

1. プロジェクト ID とトークン フェッチャーへの参照を使用します。

2. 車両フィルタクエリを使用する 車両フィルタクエリは、 表示されます。フィルタは Fleet Engine に渡されます。

   • オンデマンド サービスの場合は、vehicleFilter を使用します。ListVehiclesRequest.filter を確認します。
   • スケジュール設定されたタスクの場合は、deliveryVehicleFilter を使用して、 ListDeliveryVehiclesRequest.filter

3. 車両ディスプレイの境界を設定します。locationRestriction の用途 地図上で車両を表示するエリアを制限します。場所 これが設定されるまで、プロバイダはアクティブになりません。位置情報の境界は コンストラクタ内、またはコンストラクタの後に設定します。

4. マップビューを初期化します。

次の例は、Google Cloud のフリート ロケーション プロバイダをインスタンス化する方法を示しています。 両方のシナリオに対応しています。これらの例では、Cloud Storage バケットを コンストラクタ内の locationRestriction: 位置情報プロバイダを作成します。 アクティブです。

オンデマンドの賃走

JavaScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

スケジュール設定されたタスク

JavaScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which delivery vehicles are
          // retrieved and immediately make the location provider active.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

コンストラクタの後に locationRestriction を設定するには、 locationProvider.locationRestriction の後で、 示しています。

注: この例では、運行スケジュールが設定されたタスクについてですが、オンデマンドのルートでもこれを行うには、 使用すると、 google.maps.journeySharing.FleetEngineFleetLocationProvider。

   // You can choose to not set locationRestriction in the constructor.
   // In this case, the location provider *DOES NOT START* after this line, because
   // no locationRestriction is set.
   locationProvider = new google.maps.journeySharing.DeliveryFleetLocationProvider({
   ... // not setting locationRestriction here
   });

   // You can then set the locationRestriction *after* the constructor.
   // After this line, the location provider is active.
   locationProvider.locationRestriction = {
     north: 1,
     east: 2,
     south: 0,
     west: 1,
   };

地図のビューポートを使用して場所の制限を設定する

現在のエリアに合わせて locationRestriction 境界を設定することもできます マップビューで表示されます。

オンデマンドの賃走

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location tracking will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

スケジュール設定されたタスク

JavaScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

TypeScript

google.maps.event.addListenerOnce(
  mapView.map, 'bounds_changed', () => {
    const bounds = mapView.map.getBounds();
    if (bounds) {
      // If you did not specify a location restriction in the
      // location provider constructor, you may do so here.
      // Location provider will start as soon as this is set.
      locationProvider.locationRestriction = bounds;
    }
  });

マップビューを初期化する

位置情報プロバイダの作成が完了したら、同じ 後者の場合よりもはるかに簡単です。

JavaScript Journey Sharing ライブラリを読み込んだ後、 HTML ページに追加します。ページには 地図ビューを保持する <div> 要素。<div> 要素 以下の例では、map_canvas と名付けられています。

オンデマンドの賃走

JavaScript

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

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
                        = 'your-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

スケジュール設定されたタスク

JavaScript

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

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

イベントをリッスンしてエラーを処理する

フリートの追跡を開始したら、イベントの変更をリッスンする必要があります。 発生したエラーは、以下のセクションで説明するように処理します。

変更イベントをリッスンする

次のコマンドを使用して、車両オブジェクトからフリートに関するメタ情報を取得できます。 位置情報プロバイダメタ情報を変更すると、更新がトリガーされます。 イベントです。メタ情報には、ナビゲーションなどの車両プロパティが含まれます。 状態、残りの距離、カスタム属性などです。

詳細については、以下を参照してください。

• オンデマンドの移動車両オプションのリファレンス
• スケジュール タスクの車両オプションのリファレンス

次の例は、これらの変更イベントをリッスンする方法を示しています。

オンデマンドの賃走

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
  // e.vehicles contains data that may be
  // useful to the rest of the UI.
  if (e.vehicles) {
    for (vehicle of e.vehicles) {
      console.log(vehicle.navigationStatus);
    }
  }
});

スケジュール設定されたタスク

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

エラーのリッスン

また、リクエストへの対応中に発生するエラーをリッスンして処理することも重要です。 あります。リクエストしている車両から非同期で発生するエラー エラーイベントを発生させます。

次の例は、Pod と Pod の両方をリッスンする エラーを処理できるようにする必要があります。

JavaScript

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

TypeScript

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

フリートの追跡を停止する

フリートのトラッキングを停止するには、位置情報プロバイダの境界を null に設定します。 次に、地図表示から位置情報プロバイダを削除します。詳しくは、 説明します。

位置情報プロバイダの境界を null に設定する

位置情報プロバイダによるフリートの追跡を停止するには、境界を設定します null に設定してください。

オンデマンドの賃走

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

スケジュール設定されたタスク

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

地図表示から位置情報プロバイダを削除する

次の例は、地図表示から位置情報プロバイダを削除する方法を示しています。

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

配達車両を追跡して配達車両を確認できる

スケジュールされたタスクにモビリティ サービスを使用している場合は、どちらのサービスでも 特定の配達車両のルートと今後のタスクを表示 同じマップビューに表示されますこれを行うには、Delivery Fleet Location API を プロバイダと配達車両位置情報プロバイダの両方を登録し、両方を地図に追加します。 表示されます。インスタンス化されると、配達フリートの位置情報プロバイダが 地図上に配送車両が表示されます。次の例は、Cloud Storage バケットを 両方の位置情報プロバイダ:

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

マーカーのカスタマイズで配達車両を追跡する

配達車両位置情報プロバイダが配達車両を追跡できるようにする フリートのマーカーをクリックしたときの手順は次のとおりです。

1. マーカーをカスタマイズしてクリック アクションを追加します。

2. マーカーが重複しないように、マーカーを非表示にします。

   注: 配達フリート位置情報プロバイダは、一連のマーカーをレンダリングします。 追跡された各車両。ある車両の詳細を表示するために、 ユーザーがその車両をクリックすると、配達車両の位置情報がインスタンス化されます。 ユーザーがクリックした車両 ID を、以下の図のように設定します。 使用します。ただしその場合 配送車両は 位置情報プロバイダによって、この車両のマーカーもレンダリングされます できます。1 つのマーカーを非表示にすると、同じマーカーが 2 つ表示されなくなります。

これらの手順の例は、次のセクションで説明します。

マーカーをカスタマイズしてクリック アクションを追加する

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

マーカーが重複しないようにマーカーを非表示にする

レンダリングされないように、配達車両位置情報プロバイダに対してマーカーを非表示にします 同じ車両の 2 つのマーカー:

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

次のステップ

• 地図のスタイルを設定する