このドキュメントでは、 消費者およびフリート オペレーター向けのウェブベースの移動追跡アプリです。
Consumer SDK を使用すると、経路のポリラインの表示 / 非表示を制御したり、
ルート ポリライン。SDK は、
行程の各座標ペアの google.maps.Polyline オブジェクト
または残りのパスを指定します。ライブラリはこれらのカスタマイズを
次の 2 つの状況が考えられます。
- オブジェクトを地図に追加する前に
- 使用されるデータが変化したとき、
ルートのポリラインのスタイル設定
マーカーのスタイルを設定するのと同様に、 カスタマイズ パラメータ。次に、 次のようなアプローチがあります。
- 最もシンプル:
PolylineOptionsを使用して、 作成時または更新時にPolyline個のオブジェクトと一致しました。 - 詳細: カスタマイズ関数を指定します。
カスタマイズ関数を使用すると、
Fleet Engine が送信したデータですこの関数は、各要素のスタイルを変更して、
プロセスの現在の状態に基づいて、たとえば、
Polylineの被写体の色が濃くなったり、車が動いているときに濃くしたりしている 減らしますFleet Engine の外部にあるソースからの結合も可能 その情報に基づいて、Polylineオブジェクトのスタイルを設定します。
カスタマイズ パラメータ
ルートのポリラインをスタイル設定する際は、
FleetEngineShipmentLocationProviderOptions。これらのパラメータにより
以下のように、車両の移動経路のさまざまな経路の状態を確認できます。
- すでに移動している経路:
takenPolylineCustomizationを使用します。 - アクティブな移動経路:
activePolylineCustomizationを使用します。 - まだ移動していないパス:
remainingPolylineCustomizationを使用します。
PolylineOptions
次の例は、Polyline オブジェクトのスタイル設定を設定する方法を示しています。
PolylineOptions に置き換えます。このパターンに従って
前述のポリラインのカスタマイズを使用した任意の 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};