JavaScript フリート トラッキング ライブラリを使用すると、地図に追加されたマーカーのデザインと操作性をカスタマイズできます。これを行うには、マーカーのカスタマイズを指定します。フリート トラッキング ライブラリは、地図にマーカーを追加する前と、マーカーが更新されるたびに、このカスタマイズを適用します。マーカーのデザインと操作性は、次の方法でカスタマイズできます。
タイプに基づいてマーカーのスタイルを設定する: 同じタイプのマーカーのスタイルを設定するには、
MarkerOptionsオブジェクトを指定します。指定した変更は、各マーカーの作成後に適用され、デフォルトのオプションを上書きします。例については、このガイドのタイプに基づいてマーカーのスタイルを設定するをご覧ください。データに基づいてマーカーのスタイルを設定する: データに基づいてカスタマイズ関数を指定します。また、クリック処理など、マーカーにインタラクティビティを追加します。 フリート トラッキングのデータまたは外部ソースのデータに基づいてスタイルを設定できます。
フリート トラッキングのデータ: フリート トラッキングは、マーカーが表すオブジェクトのタイプ（車両、停留所、タスク）を含むデータを カスタマイズ関数に渡します。マーカー要素の現在の状態に応じて、マーカーのスタイルが変更されます。たとえば、残りの停留所の数やタスクのタイプなどです。
外部ソース: フリート トラッキングのデータを Fleet Engine 以外のソースのデータと組み合わせて、その 情報に基づいてマーカーのスタイルを設定することもできます。
例については、データに基づいてマーカーのスタイルを設定するをご覧ください。
マーカーにクリック処理を追加する: 例については、 クリック処理を追加するをご覧ください。
表示するマーカーをフィルタする: JavaScript ロケーション プロバイダで使用可能なフィルタリング機能を使用して、表示するマーカーをフィルタします。次に例を示します。
マーカーのカスタマイズを使用して、スケジュール設定されたタスクの配送車両を追跡する: マーカーをカスタマイズして車両を追跡できます。詳細については、マーカーのカスタマイズを使用して配送車両を追跡するをご覧ください。
マーカーのカスタマイズ オプション
フリート トラッキング ライブラリには、次のカスタマイズ パラメータが用意されています。
オンデマンド移動のカスタマイズ パラメータ
スケジュール設定されたタスクのカスタマイズ パラメータ
タイプに基づいてマーカーのスタイルを設定する
次の例は、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);
}
};