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

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

ConsumerMapStyle クラスは、マーカーとポリラインの動的なカスタマイズを行うためのセッター メソッドとゲッターメソッドを提供します。このクラスは、 ConsumerController.getConsumerMapStyle() メソッドを使用して非同期で公開します。

UI のカスタマイズは、デバイスの向きを変えても維持され、 デタッチするまで有効です ConsumerController。

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

マーカーの種類とそのプロパティを設定するには、 ConsumerMapStyle.setMarkerStyleOptions() メソッドを使用します。カスタム マーカー オプションは、Consumer SDK が提供するデフォルト値をオーバーライドします。 デフォルト値を復元するには、MarkerOptions パラメータに null を使用して setMarkerStyleOptions() を呼び出します。アクティブな MarkerOptions using getMarkerStyleOptions() を取得します。

マーカーの種類を選択する

次のマーカー アイコンを使用してカスタマイズできます。

  • TRIP_PICKUP_POINT - ルート追跡中に表示されます
  • TRIP_DROPOFF_POINT - ルート追跡中に表示されます
  • TRIP_INTERMEDIATE_DESTINATION

  • TRIP_VEHICLE - ルート追跡中に表示されます

    Consumer SDK は、ルート追跡中に TRIP_VEHICLE アイコンの向きを更新して、実際の車両がルートを走行する際の動作を再現します。

TRIP_VEHICLE

マーカー オプションを選択する

次の手順で、コンシューマー アプリのマーカーをカスタマイズできます。

  1. Google マップの MarkerOptions で提供される各マーカーのプロパティを使用します。

  2. コンストラクタを使用して MarkerOptions を作成します。

  3. 「セッター」スタイルのメソッドを使用してカスタム プロパティを指定します。

  4. 必要に応じて、MarkerOptions コンストラクタで提供されるパターンを模倣して、独自の UI 要素を使用します。

  5. マーカーをオフにするには、visible プロパティを false に設定します。その後、独自の UI 要素を代わりに使用できます。

詳細については、Google マップの MarkerOptionsをご覧ください。

マーカーのカスタマイズ例

Java

// Initializing marker options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setMarkerStyleOptions(
              MarkerType.TRIP_VEHICLE,
              new MarkerOptions()
                  .visible(false));
        });

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null);

Kotlin

// Initializing marker options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, MarkerOptions().visible(false))
  })

// Reset marker options to default values.
consumerMapStyle.setMarkerStyleOptions(MarkerType.TRIP_VEHICLE, null)

次のステップ