地図に追加するマーカーのデザインをカスタマイズします。デザインのカスタマイズ 地図に追加されるマーカーの感触と感触は 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.
});
}
};