マーカーをカスタマイズする

JavaScript フリート トラッキング ライブラリを使用すると、地図に追加するマーカーの外観をカスタマイズできます。これを行うには、マーカーのカスタマイズ、 地図にマーカーを追加する前に、フリート トラッキング ライブラリが適用する設定 マーカーを更新するたびに更新しています。マーカーの外観は次の方法でカスタマイズできます。

  1. タイプに基づいてマーカーをスタイル設定する: MarkerOptions オブジェクトを指定して、同じタイプのマーカーをスタイル設定します。指定した変更は、各マーカーの作成後に適用され、デフォルトのオプションが上書きされます。対象 タイプに基づいてマーカーのスタイルを設定するをご覧ください。 説明します。

  2. データを基にしてマーカーのスタイルを設定する: 以下に基づいてカスタマイズ関数を指定します。 クリック処理などのインタラクティブ機能をマーカーに追加することができます。 フリートのトラッキングや外部ソースのデータに基づいてスタイルを設定できます。

    • フリートのトラッキングからのデータ: フリート トラッキングは、 オブジェクトのタイプとマーカー、 は車両、停車地、タスクを表します。マーカー要素の現在の状態に応じて、マーカーのスタイルが変更されます。たとえば、 タスクの種類を指定します。

    • 外部ソース: フリートのトラッキング データと次のデータを組み合わせることができます。 Fleet Engine の外部にソースを設定し、それに基づいてマーカーのスタイルを設定します。 情報も含まれます。

    例については、データに基づくスタイル設定マーカーをご覧ください。

  3. マーカーにクリック処理を追加する: 例については、以下をご覧ください。 クリック処理を追加する。

  4. 表示するマーカーをフィルタする: 表示するマーカーをフィルタします。 フィルタ機能を使用できます。 接続します。例:

  5. マーカーのカスタマイズを使用して、スケジュール設定されたタスクの配送車両を追跡する: マーカーをカスタマイズして車両を追跡できます。詳しくは、マーカーのカスタマイズを使用して配送車両を追跡するをご覧ください。

マーカーのカスタマイズ オプション

フリート トラッキング ライブラリには、次のカスタマイズ パラメータが用意されています。

オンデマンドルートのカスタマイズ パラメータ

スケジュール設定されたタスクのカスタマイズ パラメータ

タイプに基づいてマーカーをスタイル設定する

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

オンデマンド賃走の例

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

スケジュール タスクの例

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

データに基づくマーカーのスタイル設定

次の例は、カスタマイズ関数を使用して車両マーカーのスタイルを設定する方法を示しています。このパターンに沿って、上記のマーカーのカスタマイズ オプションに記載されているオプションを使用して、データに基づいてマーカーのスタイルをカスタマイズします。

オンデマンド ルートの例

JavaScript

vehicleMarkerCustomization =
  (params) => {
    const remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

スケジュール タスクの例

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

マーカーにクリック処理を追加する

次の例は、車両マーカーにクリック処理を追加する方法を示しています。このパターンでは、 上記のマーカーのカスタマイズ オプションに記載されているオプションを使用します。

オンデマンド ルートの例

JavaScript

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

スケジュール タスクの例

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform chosen action.
      });
    }
  };

表示するマーカーをフィルタする

setVisible を使用する必要がある場合は、上記のマーカーのカスタマイズ オプションに記載されているオプションを使用して、このパターンに沿ってマーカーをフィルタします。

オンデマンド賃走の例

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

スケジュール タスクの例

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

次のステップ