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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次のステップ