Last Mile Fleet Solution is currently available only to select customers. Contact sales to learn more.

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

JavaScript の配送追跡ライブラリを使用して配送を追跡する

JavaScript Shipment Tracking Library を使用すると、 Fleet Engine で追跡されている車両と関心のある場所の数。ライブラリにドロップイン代替の JavaScript マップコンポーネントが含まれている標準の google.maps.Map エンティティとデータコンポーネントを接続するために Fleet Engine とも連携しますJavaScript Shipment Tracking Library を使用し、ウェブアプリケーションから、カスタマイズ可能なアニメーション付きの配送追跡エクスペリエンスを提供できます。

コンポーネント

JavaScript Shipment Tracking Library は、可視化のためのコンポーネントを提供します。元データとともに、目的地に向かう車両とルートのフィードを作成して、ドライバーの到着予定時刻や残りの走行距離を確認できます。

Shipment Tracking の地図表示

地図表示コンポーネントは、車両と目的地の位置を可視化します。車両のルートがわかっている場合は、地図表示コンポーネントがアニメーション表示される予測された経路に沿って移動すると予測されます。

配送先プロバイダ

配送場所プロバイダが追跡対象オブジェクトの位置情報をフィードする配送追跡マップに組み込んで、ファーストワンマイルとラストワンマイルの配送を追跡できます。

配送拠点のプロバイダを利用して、以下を追跡できます。

荷物の集荷場所または配達場所。
配達車両の位置と経路。

追跡対象の位置情報オブジェクト

位置情報プロバイダは、車両や位置情報などの物体の構成できます

宛先のロケーション

目的地とは、旅程の終点となる場所のことです。配送用予定されたタスクの場所です。

車両の位置情報

車両位置情報は、車両の追跡位置です。必要に応じて車両のルートが含まれます。

認証トークン取得ツール

Fleet Engine に保存されている位置情報へのアクセスを制御するには、 Fleet Engine 用の JSON Web Token（JWT）作成サービスを実装するサーバー上にあります次に、認証トークンフェッチャーを実装します。 JavaScript Journey Sharing Library を使用して、ウェブアプリケーションの位置情報へのアクセスを認証します。

スタイルオプション

マーカーとポリラインのスタイルで、追跡する位置情報オブジェクト。次を使用: カスタムスタイルオプション。スタイルに合わせてデフォルトのスタイルを変更できます。ウェブアプリケーションの機能を提供します。

追跡中の場所の公開設定を管理します

このセクションでは、地図上に追跡されているオブジェクトの表示設定について説明します。これらのルールは、次の 2 つのカテゴリのオブジェクトに適用されます。

位置マーカー
タスクデータ

位置マーカーの公開設定

出発地と目的地の場所のマーカーはすべて、常に地図上に表示されます。たとえば、配送場所を地図に常に表示して、常に同じです

タスクデータの可視性

このセクションでは、タスクデータに適用されるデフォルトの公開設定ルールについて説明します。車両の位置や残りのルートなどの情報を表示できますカスタマイズできるタスクはたくさんありますが、すべてではありません。

使用できないタスク -- これらのタスクの公開設定はカスタマイズできません。
アクティブな車両タスク -- これらのタイプのタスクをカスタマイズできます。
非アクティブな車両タスク -- これらのタスクの公開設定はカスタマイズできません。

利用できないタスク

利用不可のタスクが 1 つ以上ある場合（例: 運転手が休憩している場合や車両に給油中の場合）車両は見えません。到着予定時刻タスク完了までの時間と予測時間は、引き続き使用できます。

アクティブな車両タスク

「 TaskTrackingInfo オブジェクトは、パイプライン内で表示可能な多くのデータ要素を提供します。 Shipment Tracking Library（配送追跡ライブラリ）デフォルトでは、タスクの実行時にこれらのフィールドが表示されます。タスクの 5 駅以内の範囲に到着すると、車両に割り当てられ、「タスクが完了またはキャンセルされると公開終了となります。フィールドは次のとおりです。次のようになります。

ポリラインをルーティングする
到着までの予想時間
タスク完了までの予想時間
タスクまでの残りの走行距離
残りの経由地数
車両の位置情報

タスクごとに公開設定をカスタマイズするには、 TaskTrackingViewConfig Fleet Engine でタスクを作成または更新するときに指定できます。これにより、個々のデータ要素が利用可能かどうかを指定するルールです。この条件は、（以下では公開設定オプションと呼びます）

残りの経由地数
到着予定時刻までの時間
残りの走行距離
常に表示
非表示

各データ要素は、1 つの公開設定オプションにのみ関連付けることができます。 OR または AND を使用して条件を組み合わせることはできません。

カスタマイズの例を以下に示します。このカスタマイズのルールは次のとおりです。

車両が 3 つの駅 / 停留所内にある場合、ルートのポリラインを表示します。
残りの走行距離が 5,000 メートル未満の場合は、到着予定時刻が表示されます。
残りの経由地数を表示しない。
他の各フィールドは、デフォルトの表示状態を維持します。タスクから 5 駅以内にあると判断できます。

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

プロジェクトのデフォルトの公開設定をカスタマイズすることもできます。サポートチームにお問い合わせください。

ルートのポリラインと車両の位置の公開設定ルール:

ルートのポリラインを表示する場合は、車両の位置も表示できる必要があります。それ以外の場合は、車両の位置をポリラインの端で示すことができます。は、経路のポリラインに、それほど制限の緩い表示設定オプションを指定できないことを意味します。

有効な経路のポリラインまたは車両を指定するには、以下のルールに従う必要があります。位置情報の公開設定の組み合わせ:

経路のポリラインと車両の場所の表示オプションが同じ場合 type:
- 公開設定オプションが [残りの停車地数]、[到着予定時刻までの時間]、または残りの走行距離。ルートのポリラインには、車両のこの公開設定オプションに設定された値以上あります。次に例を示します。
```
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingStopCountThreshold": 5
  },
}
```
- 経路のポリラインに常に表示設定オプションがある場合は、車両の位置、常に表示される公開設定オプションも提供する必要があります。
- 車両の位置に可視性を非表示にするオプションがある場合は、ポリラインを経路設定する非表示設定オプションも提供する必要があります
経路のポリラインと車両の位置表示オプションが異なる場合車両の位置情報は、視認範囲の両方の場合のみ表示されます。検証します。

次に例を示します。
```
"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "vehicleLocationVisibility": {
    "remainingDrivingDistanceMetersThreshold": 3000
  },
}
```
この例では、車両の位置情報は、残りの停車地がある場合にのみ表示されます。カウントが 3 以上かつ残りの走行距離が 3,000 以上メートルです。

JavaScript Journey Sharing Library を使ってみる

JavaScript Journey 共有ライブラリを使用する前に、 Fleet Engine と API キーを取得します。

配送を追跡するには、まずトラッキング ID の申し立てを作成します。

トラッキング ID の申し立てを作成する

配送先プロバイダを使用して配送を追跡するには: トラッキング ID クレームを含む JSON Web Token（JWT）を作成する。

JWT ペイロードを作成するには、Authorization セクションにクレームを追加します。キーは「trackingid」に置き換えます。値を配送追跡 ID に設定します。

次の例は、トラッキング ID によるトラッキング用のトークンを作成する方法を示しています。

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

認証トークンフェッチャーを作成する

認証トークンフェッチャーを作成して、作成されたトークンを使用してサーバー上の適切なクレームを記述作成する必要があります。作成できるのはトークンのみ、サーバーに保持し、クライアント間で証明書が共有されることはありません。それ以外の場合はシステムのセキュリティが侵害されます。

フェッチャーはデータ構造を返す必要があります。 Promise でラップされた次の 2 つのフィールドで表されます。

文字列 token。
数値 expiresInSeconds。トークンは、次の時間内に期限切れとなります。あります。

JavaScript Shipment Tracking Library は、認証によってトークンをリクエストします。トークンフェッチャーは、次のいずれかに該当する場合に使用できます。

有効なトークンがない（フェッチャーをフェッチャーからトークンが返されなかった場合に返されるメッセージです。
以前に取得したトークンの有効期限が切れている。
以前に取得したトークンの有効期限が 1 分以内に切れている。

それ以外の場合、ライブラリは以前に発行された引き続き有効なトークンを使用し、フェッチャーを呼び出さないでください。

次の例は、認証トークンフェッチャーを作成する方法を示しています。

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_URL はバックエンドの実装によって異なります。サンプルアプリバックエンドの URL は次のとおりです。 <ph type="x-smartling-placeholder">
- https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
- https://SERVER_URL/token/delivery_consumer/TRACKING_ID
- https://SERVER_URL/token/fleet_reader

HTML から地図を読み込む

次の例は、JavaScript 配送追跡を読み込む方法を示しています。指定した URL のライブラリ。callback パラメータが initMap を実行します。 API がロードされた後に送信されます。defer 属性を使用すると、ブラウザで API の読み込み中にページの残りの部分のレンダリングを続行します。

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

配送を追跡する

このセクションでは、JavaScript Shipment Tracking Library の使用方法について説明します。荷物の集荷や配達のフォローも簡単にできます。必ずスクリプトタグで指定されたコールバック関数からライブラリを読み込む確認する必要があります

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

JavaScript Shipment Tracking Library は位置情報プロバイダを事前定義 Fleet Engine Deliveries API 用です。プロジェクト ID とトークンファクトリへの参照を使用して、トークンファクトリをインスタンス化します。

JavaScript

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

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

TypeScript

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

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

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

JavaScript ジャーニー共有ライブラリを読み込んだ後、 HTML ページに追加します。ページには地図ビューを保持する <div> 要素。以下の例では、 <div> 要素の名前は <div> です。

競合状態を回避するには、位置情報プロバイダのトラッキング ID を設定してください地図の初期化後に呼び出されるコールバックで指定できます。

JavaScript

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'), 
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
  // 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 will start 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

const mapView = new 
    google.maps.journeySharing.JourneySharingMapView({
  document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  vehicleMarkerSetup: vehicleMarkerSetup,
  anticipatedRoutePolylineSetup:
      anticipatedRoutePolylineSetup,
 // 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 will start 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);

トラッキング ID

位置情報プロバイダに提供されるトラッキング ID は、タスクたとえば、同じ荷物の集荷と配達のタスクなどです。配信の失敗が数回発生する。タスクが 1 つ選択されて配送追跡マップ。表示されるタスクは次のように決定されます。

未解決の集荷タスクが 1 つだけの場合は、それが表示されます。エラーが発生する複数の未完了の集荷タスクがある場合です
未完了の配信タスクが 1 つだけの場合は、そのタスクが表示されます。エラーとは未完了の配信タスクが複数ある場合は自動的に生成されます
終了した配信タスクがある場合: <ph type="x-smartling-placeholder">
- 終了した配信タスクが 1 つだけの場合は、そのタスクが表示されます。
- 終了した配信タスクが複数ある場合は、最も新しいタスクが表示されます。
- 終了したデリバリータスクが複数あり、いずれも結果がないエラーが発生します。
終了した集荷タスクがある場合: <ph type="x-smartling-placeholder">
- 終了した集荷タスクが 1 つだけの場合は、それが表示されます。
- 終了した集荷タスクが複数ある場合は、最も新しいものが表示されます。表示されます。
- 終了した集荷タスクが複数ある場合、どのタスクにも結果がないエラーが発生します。
それ以外の場合は、タスクは表示されません。

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

タスクに関するメタ情報は、タスクトラッキング情報から取得できます。このオブジェクトは位置情報プロバイダを使ってメタ情報には到着予定時刻、受け取りまたは配達までの残り所数、移動距離などを確認できます。メタ情報が変更されると、update イベントがトリガーされます。次の例をご覧ください。変更イベントをリッスンする方法を説明します

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

エラーを処理する

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

トラッキングを停止

配送業者による荷物の追跡を停止するには、荷物追跡 ID を削除します位置情報プロバイダから取得します

JavaScript

locationProvider.trackingId = '';

TypeScript

locationProvider.trackingId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

基本地図のデザインをカスタマイズする

地図コンポーネントのデザインをカスタマイズするには、地図のスタイルを設定するまたはコードでオプションを直接設定することもできます。

Cloud ベースのマップのスタイル設定を使用する

Cloud ベースのマップのスタイル設定 Google マップを使用するすべてのアプリについて、地図のスタイルを作成、編集できます Google Cloud コンソールから利用できます。コードを変更する必要はありません。地図のスタイルは、Cloud プロジェクトにマップ ID として保存されます。スタイルを適用するには JavaScript Shipment Tracking Map で、 mapId JourneySharingMapView を作成するときに指定する必要があります。mapId フィールドは変更できませんまたは JourneySharingMapView がインスタンス化された後に追加されます。次のは、以前に作成した地図のスタイルをマップ ID で有効にする方法を示しています。

JavaScript

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

TypeScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // 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 Shipment Tracking Library を使用すると、外観をカスタマイズして、地図に追加されたマーカーの感覚を体験できます。これを行うには、マーカーを配送追跡ライブラリがそれらを適用して追加する前にマーカーが地図に追加され、マーカーが更新されるたびに更新されるようになります。

最も簡単なカスタマイズは、 MarkerOptions 同じタイプのすべてのマーカーに適用されるオブジェクトです。変更点各マーカーが作成された後に適用されます。デフォルトのオプションを上書きできます

より高度なオプションとして、カスタマイズ関数を指定できます。カスタマイズデータに基づくマーカーのスタイル設定や、クリック処理など、マーカーに対するインタラクティブな操作を提供します。具体的には、配送トラッキングにより、カスタマイズ関数に、指定したオブジェクトのマーカーは車両または目的地を表します。これにより、マーカーのスタイル設定がマーカー要素自体の現在の状態に基づいて変化します。たとえば目的地までの予定していた経由地数。Google Meet の Fleet Engine 外部のソースのデータと比較し、できます。

配送追跡ライブラリには、次のカスタマイズパラメータが用意されています。 FleetEngineShipmentLocationProviderOptions:

`MarkerOptions` を使用してマーカーのスタイルを変更する

次の例は、車両マーカーのスタイル設定を MarkerOptions オブジェクト。このパターンに沿って上述のマーカーのカスタマイズ方法を使ってマーカーを作成できます。

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

カスタマイズ関数を使用してマーカーのスタイルを変更する

次の例は、車両マーカーのスタイル設定を設定する方法を示しています。フォロー任意のマーカーを使用するマーカーのスタイルをカスタマイズするには、このパターンを使用します。カスタマイズパラメータを使用できます。

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: ShipmentMarkerCustomizationFunctionParams) => {
    const stopsLeft = params.taskTrackingInfo.remainingStopCount;
    params.marker.setLabel(`${stopsLeft}`);
  };

マーカーにクリック処理を追加する

次の例は、車両マーカーにクリック処理を追加する方法を示しています。以下のパターンでは、任意のマーカーを使用するマーカーにクリック処理を追加します。カスタマイズパラメータを使用できます。

JavaScript

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

TypeScript

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

ポリラインのカスタマイズを使用する

配送追跡ライブラリを使用すると、地図上に配送ルートが表示されます。ライブラリは、 google.maps.Polyline 配送のアクティブな、または残りの座標の各ペアの path です。 Polyline オブジェクトのスタイルを設定するには、ポリラインのカスタマイズを指定します。「ライブラリはこれらのカスタマイズを 2 つの状況で適用します。オブジェクトを地図に追加したり、オブジェクトのデータが変更されたりしたときに通知されます。

マーカーのカスタマイズと同様に、 PolylineOptions 作成時に一致するすべての Polyline オブジェクトに適用更新されます。

同様に、カスタマイズ関数を指定することもできます。カスタマイズ関数 Fleet Engine によって送信されたデータに基づくオブジェクトの個別のスタイル設定が可能です。この関数は、オブジェクトの現在の状態に基づいて、各オブジェクトのスタイルを変更できます。荷物。たとえば、Polyline オブジェクトを濃い色合いに設定するなどです。速度が遅いときは厚くするとよいでしょう別のデータセットと結合することもできます。 Fleet Engine 外部のソースからエクスポートし、それに基づいて Polyline オブジェクトのスタイルを設定します。情報です。

以下のパラメータを使用してカスタマイズを指定できます。 FleetEngineShipmentLocationProviderOptions。さまざまな経路状態のカスタマイズは車両のすでに旅行した / 積極的に旅行している / まだ旅行していない「パラメータは次のとおりです。

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.taskTrackingInfo.remainingDrivingDistanceMeters;
    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: ShipmentPolylineCustomizationFunctionParams) => {
    const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
    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};

車両または位置マーカーの `InfoWindow` を表示する

InfoWindow を使用できます。車両や位置マーカーに関する追加情報を表示します。

次の例は、InfoWindow を作成してアタッチする方法を示しています。次のように、車両マーカーにマッピングします。

JavaScript

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

locationProvider.addListener('update', e => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  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.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  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

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

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
  const stopsCount =
      e.taskTrackingInfo.remainingStopCount;
  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 Shipment Tracking Library を使用すると、マーカーやその他のカスタマイズ要素を含む既存の地図そのカスタマイズを維持できます

たとえば、標準の 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, 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 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 Journey 共有ライブラリを追加するには:

認証トークンファクトリのコードを追加します。
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.
  locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
    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.trackingId = TRACKING_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // 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 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 journey sharing library 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 がウルルの付近にあれば、地図上にレンダリングされるようになります。

JavaScript の配送追跡ライブラリを使用して配送を追跡する

コンポーネント

Shipment Tracking の地図表示

配送先プロバイダ

追跡対象の位置情報オブジェクト

宛先のロケーション

車両の位置情報

認証トークン取得ツール

スタイル オプション

追跡中の場所の公開設定を管理します

位置マーカーの公開設定

タスクデータの可視性

利用できないタスク

アクティブな車両タスク

ルートのポリラインと車両の位置の公開設定ルール:

JavaScript Journey Sharing Library を使ってみる

トラッキング ID の申し立てを作成する

認証トークン フェッチャーを作成する

JavaScript

TypeScript

HTML から地図を読み込む

配送を追跡する

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

JavaScript

TypeScript

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

JavaScript

TypeScript

トラッキング ID

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

JavaScript

TypeScript

エラーを処理する

JavaScript

TypeScript

トラッキングを停止

JavaScript

TypeScript

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

JavaScript

TypeScript

基本地図のデザインをカスタマイズする

Cloud ベースのマップのスタイル設定を使用する

JavaScript

TypeScript

コードベースの地図のスタイル設定を使用する

JavaScript

TypeScript

マーカーのカスタマイズ機能を使用する

MarkerOptions を使用してマーカーのスタイルを変更する

JavaScript

TypeScript

カスタマイズ関数を使用してマーカーのスタイルを変更する

JavaScript

TypeScript

マーカーにクリック処理を追加する

JavaScript

TypeScript

ポリラインのカスタマイズを使用する

PolylineOptions を使用して Polyline オブジェクトのスタイルを変更する

JavaScript

TypeScript

カスタマイズ関数を使用して Polyline オブジェクトのスタイルを変更する

JavaScript

TypeScript

Polyline オブジェクトの公開設定を制御する

JavaScript

TypeScript

車両または位置マーカーの InfoWindow を表示する

JavaScript

TypeScript

自動適合を無効にする

JavaScript

TypeScript

既存の地図を置き換える

スタイルオプション

認証トークンフェッチャーを作成する

`MarkerOptions` を使用してマーカーのスタイルを変更する

`PolylineOptions` を使用して `Polyline` オブジェクトのスタイルを変更する

カスタマイズ関数を使用して `Polyline` オブジェクトのスタイルを変更する

`Polyline` オブジェクトの公開設定を制御する

車両または位置マーカーの `InfoWindow` を表示する