JavaScript のフリート トラッキング ライブラリを使用して、デザインをカスタマイズ可能 地図に追加されたマーカーの数が増えます。これを行うには、マーカーのカスタマイズ、 地図にマーカーを追加する前にフリート トラッキング ライブラリが適用する設定 マーカーを更新するたびに最適化されます。マーカーのデザインは、 できます。
タイプに基づいてマーカーのスタイルを設定する:
MarkerOptions同じタイプのマーカーのスタイルを設定できます。指定した変更は 適用され、デフォルトのオプションはすべて上書きされます。対象 タイプに基づいてマーカーのスタイルを設定するをご覧ください。 説明します。データを基にしてマーカーのスタイルを設定する: 以下に基づいてカスタマイズ関数を指定します。 クリック処理などのインタラクティブ機能をマーカーに追加することができます。 フリートのトラッキングや外部ソースのデータに基づいてスタイルを設定できます。
フリートのトラッキングからのデータ: フリート トラッキングは、 オブジェクトのタイプとマーカー、 は車両、停車地、タスクを表します。マーカーのスタイル設定を変更してから マーカー要素の現在の状態に基づいて設定されます。たとえば、 タスクの種類を指定します。
外部ソース: フリートのトラッキング データと次のデータを組み合わせることができます。 Fleet Engine の外部にソースを設定し、それに基づいてマーカーのスタイルを設定します。 情報も含まれます。
例については、データに基づくマーカーのスタイルを設定するをご覧ください。
マーカーにクリック処理を追加する: 例については、以下をご覧ください。 クリック処理を追加する。
表示するマーカーをフィルタする: 表示するマーカーをフィルタします。 フィルタ機能を使用できます。 接続します。例:
で確認できます。マーカーのカスタマイズ機能を使用して、スケジュール設定されたタスクを提供する車両を追跡する: マーカーをカスタマイズして車両を追跡できます。詳細については、 配達車両を追跡するためのマーカーのカスタマイズをご覧ください。
マーカーのカスタマイズ オプション
フリート トラッキング ライブラリには、次のカスタマイズ パラメータが用意されています。
オンデマンドルートのカスタマイズ パラメータ
スケジュール タスクのカスタマイズ パラメータ
タイプに基づいてマーカーのスタイルを設定する
次の例は、車両マーカーのスタイル設定を
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);
}
};