このドキュメントでは、ウェブベースの消費者向けルート追跡アプリで使用する地図のルート ポリラインをカスタマイズする方法について説明します。
Consumer SDK を使用すると、地図上のルートのポリラインの表示を制御したり、ルートのポリラインのスタイルを設定したりできます。SDK は、ルートのアクティブなパスまたは残りのパスの座標ペアごとに google.maps.Polyline オブジェクトを作成します。ライブラリは、次の 2 つの状況でこれらのカスタマイズを適用します。
- オブジェクトを地図に追加する前に
- オブジェクトに使用されるデータが変更されたとき
ルート ポリラインのスタイルを設定する
カスタマイズ パラメータを使用して、マーカーのスタイルを設定するのと同様に、ルートのポリラインのスタイルを設定します。そこから、次のいずれかの方法でスタイル設定を構成します。
- 最もシンプル:
PolylineOptionsを使用して、一致するすべてのPolylineオブジェクトが作成または更新されたときに適用します。 - 詳細: カスタマイズ関数を指定します。カスタマイズ関数を使用すると、Fleet Engine から送信されたデータに基づいて、オブジェクトの個別のスタイルを設定できます。この関数は、移動の現在の状態に基づいて各オブジェクトのスタイルを変更できます。たとえば、車両の移動速度が遅いときに、
Polylineオブジェクトの色を濃くしたり、太くしたりできます。Fleet Engine 以外のソースから結合して、その情報に基づいてPolylineオブジェクトのスタイルを設定することもできます。
カスタマイズ パラメータ
ルートのポリラインのスタイルを設定するには、FleetEngineTripLocationProviderOptions で提供されるパラメータを使用します。これらのパラメータは、次のように車両の移動におけるさまざまな経路の状態を提供します。
- 移動済みのパス:
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.trip.remainingWaypoints[0].distanceMeters;
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: TripPolylineCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints[0].distanceMeters;
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};