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

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

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

Consumer SDK を使用すると、経路のポリラインの表示 / 非表示を制御したり、 ルート ポリライン。SDK は、 行程の各座標ペアの google.maps.Polyline オブジェクト または残りのパスを指定します。ライブラリはこれらのカスタマイズを 次の 2 つの状況が考えられます。

  • オブジェクトを地図に追加する前に
  • 使用されるデータが変化したとき、

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

マーカーのスタイルを設定するのと同様に、 カスタマイズ パラメータ。次に、 次のようなアプローチがあります。

  • 最もシンプル: PolylineOptions を使用して、 作成時または更新時に Polyline 個のオブジェクトと一致しました。
  • 詳細: カスタマイズ関数を指定します。 カスタマイズ関数を使用すると、 Fleet Engine が送信したデータですこの関数は、各要素のスタイルを変更して、 プロセスの現在の状態に基づいて、たとえば、 Polyline の被写体の色が濃くなったり、車が動いているときに濃くしたりしている 減らしますFleet Engine の外部にあるソースからの結合も可能 その情報に基づいて、Polyline オブジェクトのスタイルを設定します。

カスタマイズ パラメータ

ルートのポリラインをスタイル設定する際は、 FleetEngineTripLocationProviderOptions。これらのパラメータにより 以下のように、車両の移動経路のさまざまな経路の状態を確認できます。

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