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

プラットフォームを選択: 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)

次のステップ