このドキュメントでは、一般ユーザーとフリート オペレーター向けのウェブベースのジャーニー追跡アプリで使用する地図の経路ポリラインをカスタマイズする方法について説明します。
Consumer SDK を使用すると、ルート ポリラインの可視性を制御したり、地図上のルートのルート ポリラインのスタイルを設定したりできます。SDK は、ジャーニーのアクティブなパスまたは残りのパスの座標のペアごとに google.maps.Polyline
オブジェクトを作成します。ライブラリは、次の 2 つの状況でこれらのカスタマイズを適用します。
- 地図にオブジェクトを追加する前に
- 使用されるデータが変化したとき、
ルート ポリラインのスタイルを設定する
マーカーのスタイルを設定する場合と同様に、カスタマイズ パラメータを使用して経路のポリラインのスタイルを設定します。次に、次のいずれかの方法でスタイル設定を構成します。
- 最もシンプル:
PolylineOptions
を使用して、一致するすべてのPolyline
オブジェクトを作成または更新するときに適用します。 - 詳細: カスタマイズ関数を指定します。カスタマイズ関数を使用すると、Fleet Engine から送信されたデータに基づいてオブジェクトのスタイルを個別に設定できます。この関数は、ルートの現在の状態に基づいて各オブジェクトのスタイルを変更できます。たとえば、
Polyline
オブジェクトの色を濃くしたり、車両の速度が遅いときにオブジェクトを太くしたりできます。Fleet Engine の外部ソースと結合し、その情報に基づいてPolyline
オブジェクトのスタイルを設定することもできます。
カスタマイズ パラメータ
ルート ポリラインのスタイル設定では、FleetEngineShipmentLocationProviderOptions
で指定されたパラメータを使用します。これらのパラメータは、以下のように車両の移動経路のさまざまな経路の状態を提供します。
- すでに移動している経路:
takenPolylineCustomization
を使用します。 - アクティブな移動経路:
activePolylineCustomization
を使用します。 - まだ移動していないパス:
remainingPolylineCustomization
を使用します。
PolylineOptions
次の例は、PolylineOptions
を使用して Polyline
オブジェクトのスタイル設定を構成する方法を示しています。このパターンに沿って、前述のポリラインのカスタマイズを使用して Polyline
オブジェクトのスタイルをカスタマイズします。
JavaScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
TypeScript
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
カスタマイズ機能を使用して経路ポリラインのスタイルを設定する
次の例は、アクティブなルート ポリラインのスタイル設定を設定する方法を示しています。このパターンに従って、前述のルート ポリラインのカスタマイズ パラメータを使用して Polyline
オブジェクトのスタイルをカスタマイズします。
JavaScript
// Color the route 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 route 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
オブジェクトを非表示にするには、その visible
プロパティを設定します。
JavaScript
remainingPolylineCustomization = {visible: false};
TypeScript
remainingPolylineCustomization = {visible: false};