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

このドキュメントでは、地図上で追跡中の車両のルートの外観をカスタマイズする方法について説明します。ルートは地図上にポリラインで描画されます。車両のアクティブなパスまたは残りのパス内の座標のペアごとに、ライブラリは 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();

次のステップ