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

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

ルート ポリラインをカスタマイズするには、ConsumerMapStyle.setPolylineStyleOptions メソッドを使用します。カスタム ポリライン オプションを設定すると、Consumer SDK で提供されるデフォルト値がオーバーライドされます。

デフォルト値を復元するには、PolylineOptions パラメータに null を指定して setPolylineStyleOptions を呼び出します。

アクティブな PolylineOptions を取得するには、getPolylineStyleOptions メソッドを使用します。

詳細については、ConsumerMapStyle.setPolylineStyleOptions をご覧ください。

ルートのポリライン タイプ

次のルート ポリライン タイプをカスタマイズできます。

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE と REMAINING_ROUTE は、トリップをたどっているときに表示され、車両のルートを表します。

ルート ポリラインのプロパティ

Google マップでは、PolylineOptions の各ポリラインにカスタマイズ可能なプロパティが用意されています。

  • PolylineOptions をビルドするには、そのコンストラクタを使用します。

  • カスタム プロパティを指定するには、「セッター」スタイルのメソッドを使用します。このメソッドは各プロパティのデフォルト値を提供するため、カスタム値を指定するだけで済みます。

  • ポリラインをオフにするには、visible を false に設定します。

詳細については、Android デベロッパー向けドキュメントの PolylineOptions をご覧ください。

例

Java

// Initializing polyline style options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .visible(false));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    consumerMapStyle.setPolylineStyleOptions(
      PolylineType.ACTIVE_ROUTE,
      PolylineOptions().visible(false)
    )
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

アクティブなルートと残りのルート

ルート共有を有効にすると、アプリはポリラインを使用して車両のアクティブなルートと残りのルートを表示し、ユーザー エクスペリエンスをカスタマイズできます。

  • アクティブなルートは、消費者のアクティブなトリップの次のウェイポイントに到達するために車両が現在走行している経路です。

  • 残りのルートは、車両がアクティブなルートを通過した後に走行する必要があるパスです。アクティブなルートのウェイポイントが最後のトリップのウェイポイントである場合、残りのルートは存在しません。

アプリでアクティブなポリラインと残りのポリラインの表示をカスタマイズして制御できます。デフォルトでは、アクティブなルートは表示され、残りのルートは表示されません。

例

Java

// Initializing polyline options.
consumerController
    .getConsumerMapStyle()
    .addOnSuccessListener(
        consumerMapStyle -> {
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.ACTIVE_ROUTE,
              new PolylineOptions()
                  .color(Color.BLUE));
          consumerMapStyle.setPolylineStyleOptions(
              PolylineType.REMAINING_ROUTE,
              new PolylineOptions()
                  .color(Color.BLACK)
                  .width(5)
                  .visible(true));
        });

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null);
consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null);

Kotlin

// Initializing polyline options.
consumerController
  .getConsumerMapStyle()
  .addOnSuccessListener({ consumerMapStyle ->
    {
      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.ACTIVE_ROUTE,
        PolylineOptions().color(Color.BLUE)
      )

      consumerMapStyle.setPolylineStyleOptions(
        PolylineType.REMAINING_ROUTE,
        PolylineOptions().color(Color.BLACK).width(5).visible(true)
      )
    }
  })

// Reset polyline options to default values.
consumerMapStyle.setPolylineStyleOptions(PolylineType.ACTIVE_ROUTE, null)

consumerMapStyle.setPolylineStyleOptions(PolylineType.REMAINING_ROUTE, null)

交通状況を考慮したポリライン

ポリラインの交通状況レイヤは、デフォルトで無効になっています。有効にすると、レンダラはルート ポリラインの上に、通常とは異なる交通状況の区間を表すセグメントを描画します。交通状況に応じたオフセットが含まれます。詳しくは、Android デベロッパー向けドキュメントの Polyline をご覧ください。

Google マップでは、交通状況を4 種類の速度タイプのいずれかで表します。速度タイプごとに色をカスタマイズできます。

交通状況を考慮したポリラインを有効にするには、TrafficStyle オブジェクトを作成し、setPolylineTrafficStyle() を呼び出して ConsumerMapStyle に渡します。

例

Java

// TrafficStyle is part of the Consumer SDK.
int orange = Color.rgb(255, 165, 0);
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW, orange)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val orange = Color.rgb(255, 165, 0)
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GRAY)
    .setTrafficColor(SpeedType.NORMAL, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW, orange)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)