ルートのポリラインをカスタマイズする

プラットフォームを選択: Android iOS JavaScript

このドキュメントでは、一般ユーザー向けのウェブベースのジャーニー トラッキング アプリで使用する地図のルート ポリラインをカスタマイズする方法について説明します。

Consumer SDK を使用すると、地図上の乗車ルートのポリラインの表示 / 非表示を切り替えたり、スタイルを設定したりできます。SDK は、ルートのアクティブなパスまたは残りのパスの座標のペアごとに google.maps.Polyline オブジェクトを作成します。ライブラリは、次の 2 つの状況でこれらのカスタマイズを適用します。

  • 地図にオブジェクトを追加する前に
  • オブジェクトに使用されるデータが変更された場合

ルートのポリラインのスタイルを設定する

マーカーのスタイル設定と同様に、ルートのポリラインのスタイル設定にはカスタマイズ パラメータを使用します。ここから、次のいずれかの方法でスタイルを設定します。

  • 最も単純な方法: PolylineOptions を使用して、一致するすべての Polyline オブジェクトの作成時または更新時に適用します。
  • Advanced: カスタマイズ関数を指定します。カスタマイズ関数を使用すると、Fleet Engine から送信されたデータに基づいてオブジェクトのスタイルを個別に設定できます。この関数は、ジャーニーの現在の状態に基づいて各オブジェクトのスタイルを変更できます。たとえば、車両の速度が遅い場合は Polyline オブジェクトの色を濃くしたり、太くしたりできます。Fleet Engine 以外のソースから結合して、その情報に基づいて Polyline オブジェクトのスタイルを設定することもできます。

カスタマイズ パラメータ

ルートのポリラインのスタイルを設定する場合は、FleetEngineTripLocationProviderOptions で提供されるパラメータを使用します。これらのパラメータは、車両の走行中のさまざまなパスの状態を表します。

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