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

配送状況を確認する

スケジュールタスク用に JavaScript Consumer SDK を設定したので、次は出荷後にユーザーアプリを使用する準備が整いましたこのドキュメントでは、このプロセスの主なステップは次のとおりです。

地図を初期化して共通の経路を表示する
ルートの進行状況を更新、確認する
ルートの共有を停止する
エラーを処理する

地図を設定する

ウェブアプリで受け取りまたは宅配を追跡するには、地図を読み込む必要があります Consumer SDK をインスタンス化し、配送の追跡を開始します。ファイルを読み込む新しい地図か既存の地図を使うことができます次に、初期化コマンドを使用して関数を使用して Consumer SDK をインスタンス化し、マップビューがトラッキング対象の商品アイテムの位置。

Google Maps JavaScript API を使用して新しい地図を読み込む

新しい地図を作成するには、ウェブアプリで Google Maps JavaScript API を読み込みます。「次の例は、Google Maps JavaScript API を読み込んで初期化チェックをトリガーします。

callback パラメータは、API の読み込み後に initMap 関数を実行します。
defer 属性を使用すると、ブラウザは API の読み込み中にページの残りをレンダリングし続けることができます。

initMap 関数を使用して、Consumer SDK をインスタンス化します。例:

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

既存の地図を読み込む

Google Maps JavaScript API によって作成された既存の地図（すでに使用している地図など）を読み込むこともできます。

たとえば、標準の google.maps.Map を含むウェブページがあるとします。次の HTML コードで定義されているとおり、マーカーが表示されるエンティティです。この最後のコールバックで同じ initMap 関数を使用して、地図を表示します。

    <!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 Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
          // 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 Pier 39
          var marker = new google.maps.Marker({position: pier39, map: map});
        }
        </script>
        <!-- Load the API from the specified URL.
           * The defer attribute allows the browser to render the page while the API loads.
           * The key parameter contains your own API key.
           * 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>

配送場所プロバイダをインスタンス化する

配送先プロバイダを認証トークンと併せて使用する Fleet Engine からデータの受信を開始します。

次の例は、位置情報プロバイダをインスタンス化する方法を示しています。

JavaScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

TypeScript

const locationProvider =
  new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
      projectId: 'your-project-id',
      authTokenFetcher: authTokenFetcher,  // the fetcher defined previously
  });

共通のジャーニーを表示する

地図に共有ルートを表示するには、ビューを初期化する必要があります。これにより、地図自体のフレームが、Fleet Engine から情報を取得した後、Consumer SDK から提供されたトラッキング中のルートの位置に対応するように設定されます。

ヒント:

ページに、地図ビューを保持する <div> 要素が含まれていることを確認します。以下の例で、<div> 要素の名前は map_canvas です。
Fleet Engine によって追跡対象に適用されるデフォルトの公開設定ルールに注意学びますアクティブな車両の公開設定ルールを設定することもできますスケジュール設定された停止タスクタスクを構成するガイドのタスクの公開設定をカスタマイズするをご覧ください。

次の例は、地図ビューを初期化する方法を示しています。

JavaScript

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
    // Any undefined styling options use defaults.
  });

  // If you did not specify a tracking ID in the location
  // provider constructor, you may do so here.
  // Location tracking starts 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

function initMap() {
  const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
    element: document.getElementById('map_canvas'),
   // 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 starts 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);
}

配送状況を更新する

イベントをリッスンし、配送の進行状況をジャーニーとして更新できる学習します位置情報プロバイダを使用して、 taskTrackingInfo オブジェクト。メタの変更情報によって update イベントがトリガーされます。taskTrackingInfo オブジェクトは、次のとおりです。

ETA
残りの経由地数
受け取りまたは宅配までの残り距離

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

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

複数のタスクの表示条件

スケジュール設定されたタスクの Consumer SDK では、地図にトラッキング ID ごとに 1 つのタスクのみが表示されます。ただし、通常は特定のコンバージョンに 1 つのトラッキング ID を shipment good（配送商品）は、配送プロセス全体を通じて商品に関連付けられたままになります。確認できます。つまり、1 つのトラッキング ID が集荷タスクの後に同じ商品の配達タスクが続くといった、複数のタスクが 1 つの荷物の複数の発送タスクに失敗した場合もあります

このような状況に対処するために、Fleet Engine はタスクの表示条件を適用します。表します

タスクの条件	結果
受け取りタスクを開く
1 つのみ存在	タスクを表示する
複数存在する	エラーを生成
Closed pickup Tasks
1 つのみ存在	タスクを表示する
複数存在する（一部は結果時間あり）	最新の結果時刻でタスクを表示
複数存在する（結果時間がない）	エラーを生成する
配信タスクを開く
1 つのみ存在	タスクを表示する
複数存在する	エラーを生成
終了した配信タスク
1 つのみ存在	タスクを表示する
複数存在する（一部は結果時間あり）	最新の結果時刻でタスクを表示
複数存在する（結果時間がない）	エラーを生成

配送のフォローをやめる

配送プロセスが完了したかキャンセルされると、一般ユーザー向けアプリはトラッキング ID と位置情報プロバイダをアクセスできます。

トラッキング ID を削除する

配送業者による荷物の追跡を停止するには、荷物追跡 ID を削除します位置情報プロバイダから取得します次の例は、これを行う方法を示しています。

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

配送追跡エラーを処理する

配送情報のリクエストから非同期に発生するエラーは、 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 ブロックでラップしてください。予期しないエラーを処理できます。

次のステップ

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