このページは Cloud Translation API によって翻訳されました。

車両を追跡する

このセクションでは、JavaScript フリートトラッキングライブラリを使用して、オンデマンドの出張やスケジュールされたタスクのための車両。

車両を追跡するには、次の手順を行います。

ライブラリを読み込んでマップビューを初期化する
車両の位置と地図表示を提供する
イベントをリッスンしてエラーを処理する
記録を停止

ライブラリを読み込んでマップビューを初期化する

フリートの運用状況をウェブページの地図に表示するには、次のコマンドを使用します。 API キーを使用して地図を呼び出すスクリプト次の例は HTML から行うには:

URL ソース: Google Maps API を呼び出し、API キーを使用して地図をリクエストします。
callback パラメータ: API が呼び出しを返した後に initMap 関数を実行します。
libraries パラメータ: フリートトラッキングライブラリを読み込みます。

defer 属性: ブラウザが残りの部分のレンダリングを続行できるようにします。表示されます。

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

車両の位置と地図表示を提供する

車両のトラッキングを開始するには、2 人とも車両位置情報プロバイダをインスタンス化しますさらに、以下で説明するように、車両 ID でマップビューを初期化します。できます。

車両位置情報プロバイダをインスタンス化する

JavaScript のフリートトラッキングライブラリには、フリート用の位置情報プロバイダが含まれています。 Engine 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

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

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

車両の追跡を開始したら、地図上で走行状況を更新したい走行中のエラーを処理します

車両イベントをリッスンする

オンデマンドでの移動やスケジュールされたタスクのために車両の進捗状況を追跡するには、変更イベントをリッスンする必要があります

vehicle オブジェクトまたは deliveryVehicle オブジェクトからメタを取得するには、位置情報プロバイダメタ情報には到着予定時刻と残りの距離が含まれる通知されるようにすることもできますメタ情報の変更位置情報プロバイダの 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('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

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

車両の追跡を停止する

車両の追跡を停止するには、位置情報プロバイダから車両を削除して、地図表示から位置情報プロバイダを削除するできます。この例は、オンデマンドルートとスケジュール済みのタスクの両方に適用されます。説明します。

位置情報プロバイダから車両を削除する

位置情報プロバイダによる車両の追跡を停止するには、位置情報プロバイダから取得した配達車両 ID。

オンデマンドの賃走

JavaScript

locationProvider.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

車両を追跡する

ライブラリを読み込んでマップビューを初期化する

車両の位置と地図表示を提供する

車両位置情報プロバイダをインスタンス化する

オンデマンドの賃走

JavaScript

TypeScript

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

JavaScript

TypeScript

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

オンデマンドの賃走

JavaScript

TypeScript

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

JavaScript

TypeScript

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

車両イベントをリッスンする

オンデマンドの賃走

JavaScript

TypeScript

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

JavaScript

TypeScript

エラーを処理する

オンデマンドの賃走

JavaScript

TypeScript

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

JavaScript

TypeScript

車両の追跡を停止する

位置情報プロバイダから車両を削除する

オンデマンドの賃走

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

次のステップ