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

このドキュメントでは、地図上の追跡対象車両のルートのデザインと操作性をカスタマイズする方法について説明します。経路は地図上にポリラインで描画されます。ライブラリは、車両のアクティブなパスまたは残りのパスの座標のペアごとに google.maps.Polyline オブジェクトを作成します。Polyline オブジェクトのスタイルを設定するには、ライブラリが次の 2 つの状況で適用するポリラインのカスタマイズを指定します。

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

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

マーカーをカスタマイズできるのと同様に、ルートのポリラインのスタイルもさまざまな方法で設定できます。

  1. タイプ別にルートのポリラインをスタイル設定する: PolylineOptions を使用して、一致するすべての Polyline オブジェクトが作成または更新されたときに適用します。例については、タイプ別にポリラインのスタイルを設定するをご覧ください。

  2. データに基づいてルートのポリラインのスタイルを設定する: フリート トラッキングのデータまたは外部ソースのデータに基づいて、カスタマイズ関数を指定します。

    • フリート トラッキングのデータ: フリート トラッキングは、現在の車両の状態に関するデータなど、ポリライン データをカスタマイズ関数に渡します。このデータに基づいてポリラインのスタイルを設定できます。たとえば、車両の速度が遅い場合は Polyline オブジェクトの色を濃くしたり、太くしたりできます。

    • 外部ソース: フリート トラッキング データを Fleet Engine 以外のソースのデータと組み合わせて、その情報に基づいて Polyline オブジェクトのスタイルを設定できます。

    例については、データに基づいてポリラインのスタイルを設定するをご覧ください。

  3. ルートのポリラインの表示を制御する: visible プロパティを使用して、ポリラインの表示と非表示を切り替えることができます。詳しくは、このガイドのポリラインの表示 / 非表示を切り替えるをご覧ください。

  4. 車両または位置マーカーの追加情報を表示する: infowindow プロパティを使用して追加情報を表示できます。詳しくは、このガイドの車両または位置マーカーの追加情報を表示するをご覧ください。

ポリラインのカスタマイズ オプション

FleetEngineVehicleLocationProviderOptions と FleetEngineDeliveryVehicleLocationProviderOptions の両方で、次のカスタマイズ オプションを使用できます。車両の走行経路のさまざまな状態に合わせてカスタマイズを設定できます。

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

タイプ別にルートのポリラインのスタイルを設定するには、PolylineOptions を使用して Polyline オブジェクトのスタイルを変更します。

次の例は、PolylineOptions を使用して Polyline オブジェクトのスタイルを設定する方法を示しています。このパターンに沿って、このガイドのポリラインのカスタマイズ オプションに記載されているルート ポリラインのカスタマイズを使用して、Polyline オブジェクトのスタイルをカスタマイズします。

オンデマンドの乗車またはスケジュール設定されたタスクの例

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

データを使用してルートのポリラインのスタイルを設定する

データを使用してルートのポリラインのスタイルを設定するには、カスタマイズ関数を使用して Polyline オブジェクトのスタイルを変更します。

次の例は、カスタマイズ関数を使用してアクティブなルートのスタイルを設定する方法を示しています。このパターンに沿って、このガイドのポリラインのカスタマイズ オプションに記載されているポリラインのカスタマイズ パラメータを使用して、任意の Polyline オブジェクトのスタイルをカスタマイズします。

オンデマンド乗車サービスの例

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.vehicle.waypoints[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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[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'});
      }
    }
  };

スケジュール設定されたタスクの例

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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 Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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'});
      }
    }
  };

交通状況を考慮したスタイルの例（オンデマンドの乗車のみ）

Fleet Engine は、追跡対象の車両のアクティブなパスと残りのパスの交通速度データを返します。この情報を使用して、トラフィック速度に応じて Polyline オブジェクトのスタイルを設定できます。

JavaScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

ポリラインの表示設定を制御する

デフォルトでは、すべての Polyline オブジェクトが表示されます。Polyline オブジェクトを非表示にするには、visible プロパティを false に設定します。

オンデマンドの乗車またはスケジュール設定されたタスクの例

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

車両または位置マーカーの情報ウィンドウを表示する

InfoWindow を使用して、車両または位置マーカーに関する追加情報を表示できます。

次の例は、InfoWindow を作成して車両マーカーにアタッチする方法を示しています。

オンデマンド乗車サービスの例

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off point.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

スケジュール設定されたタスクの例

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance =
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

次のステップ