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

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

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

UI のカスタマイズはデバイスの回転をまたいで保持され、ConsumerController を切断するまで有効です。

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

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

マーカーの種類を選択

以下のマーカー アイコンを使用およびカスタマイズできます。

  • TRIP_PICKUP_POINT - ルートの追跡中に表示
  • TRIP_DROPOFF_POINT - ルートの追跡中に表示
  • TRIP_INTERMEDIATE_DESTINATION

  • TRIP_VEHICLE - ルートのフォロー中に表示されます

    Consumer SDK はルートのモニタリング中に TRIP_VEHICLE アイコンの回転を更新し、ルートを走行する実際の車両の動作を模倣します。

マーカーのオプションを選択

次の手順で、一般ユーザー向けアプリのマーカーをカスタマイズできます。

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

  2. コンストラクタを使用して MarkerOptions をビルドします。

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

  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)

次のステップ