地図に追加されるマーカーのデザインをカスタマイズします。地図に追加したマーカーの外観と操作性は、次の 2 つの方法でカスタマイズできます。
タイプに基づいてマーカーをスタイル設定する:
MarkerOptions
オブジェクトを指定して、同じタイプのマーカーをスタイル設定します。指定する変更は 各マーカーが作成されると適用され、デフォルトのオプションはすべて上書きされます。 例については、以下をご覧ください。 こちらのMarkerOptions
を使用してマーカーのスタイルを変更する ご覧くださいデータを基にしてマーカーのスタイルを設定する: カスタマイズ関数を指定して、 スタイル マーカーを作成できます。カスタマー ジャーニーのデータに基づいてスタイルを設定できる できます。
ルート共有のデータ: ルート共有では、マーカーが表すオブジェクトのタイプ(車両、出発地、ウェイポイント、目的地)など、マーカーデータがカスタマイズ関数に渡されます。マーカー要素の現在の状態に応じて、マーカーのスタイルが変更されます。たとえば、 車両が走行を終了するまでの残りのウェイポイントの数。
外部ソース: ジャーニーのデータ共有と Fleet Engine 外部のソースからのデータを取得し、それに基づいてマーカーのスタイルを設定 情報も含まれます。
例については、以下をご覧ください。 カスタマイズ関数を使用してマーカーのスタイルを変更する ご覧ください。
マーカーにクリック処理を追加する: たとえば、 クリック処理を追加するをご覧ください。
マーカーのカスタマイズ オプション
どちらのオプションでも、Google
Maps JavaScript API
FleetEngineTripLocationProviderOptions
:
vehicleMarkerCustomization
originMarkerCustomization
waypointMarkerCustomization
destinationMarkerCustomization
MarkerOptions
を使用してマーカーのスタイルを変更する
次の例は、車両マーカーのスタイル設定を
MarkerOptions
オブジェクト。このパターンに沿って
上記のカスタマイズ方法のいずれかを使用したマーカー
マーカーのカスタマイズ オプション。
JavaScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
TypeScript
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
カスタマイズ関数を使用してマーカーのスタイルを変更する
次の例は、次のコマンドを使用して車両マーカーのスタイル設定を設定する方法を示しています。 カスタマイズすることもできます。このパターンに沿って にリストされているマーカー カスタマイズ パラメータのいずれかを使用したマーカー マーカーのカスタマイズ オプション。
JavaScript
vehicleMarkerCustomization =
(params) => {
var distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
const distance = params.trip.remainingWaypoints.length;
params.marker.setLabel(`${distance}`);
};
マーカーにクリック処理を追加する
次の例は、車両マーカーにクリック処理を追加する方法を示しています。 以下のパターンでは、任意のマーカーを使用するマーカーにクリック処理を追加します。 マーカーのカスタマイズ オプションに記載されているカスタマイズ パラメータ。
JavaScript
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
TypeScript
vehicleMarkerCustomization =
(params: TripMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};