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

プラットフォームを選択: Android iOS JavaScript

地図に追加されるマーカーのデザインをカスタマイズします。デザインのカスタマイズ 地図に追加されるマーカーの感触と感触は 2 種類あります。

1. タイプに基づいてマーカーのスタイルを設定する: MarkerOptions 同じタイプのマーカーのスタイルを設定できます。指定する変更は 各マーカーが作成されると適用され、デフォルトのオプションはすべて上書きされます。 例については、以下をご覧ください。 こちらの MarkerOptions を使用してマーカーのスタイルを変更する ご覧ください

2. データを基にしてマーカーのスタイルを設定する: カスタマイズ関数を指定して、 スタイル マーカーを作成できます。カスタマー ジャーニーのデータに基づいてスタイルを設定できる できます。

   • 移動経路の共有からのデータ: 移動経路の共有により、マーカーデータが マーカーが表すオブジェクトの型を含むカスタマイズ関数: 車両、出発地、地点、目的地。マーカーのスタイル設定を変更してから マーカー要素の現在の状態に基づいて設定されます。たとえば、 車両が走行し終わるまでに残っているウェイポイントの数。

   • 外部ソース: ジャーニーのデータ共有と Fleet Engine 外部のソースからのデータを取得し、それに基づいてマーカーのスタイルを設定 情報も含まれます。

   例については、以下をご覧ください。 カスタマイズ関数を使用してマーカーのスタイルを変更する ご覧ください。

3. マーカーにクリック処理を追加する: たとえば、 クリック処理を追加するをご覧ください。

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

どちらのオプションでも、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.
      });
    }
  };

次のステップ

• ルートのポリラインをカスタマイズする