Penyesuaian UI Android

Class ConsumerMapStyle memiliki metode penyetel dan pengambil yang memberi Anda penyesuaian dinamis untuk penanda dan polyline. Class ini diekspos secara asinkron menggunakan metode ConsumerController.getConsumerMapStyle().

Penyesuaian UI akan tetap berlaku di seluruh rotasi perangkat dan tetap berlaku hingga ConsumerController dilepas.

Penanda kustom

Metode untuk menetapkan jenis penanda dan propertinya adalah ConsumerMapStyle.setMarkerStyleOptions(). Opsi penanda kustom Anda menggantikan nilai default yang diberikan oleh Consumer SDK. Untuk memulihkan nilai default, panggil setMarkerStyleOptions() menggunakan null untuk parameter MarkerOptions. Ambil MarkerOptions aktif menggunakan getMarkerStyleOptions().

Jenis penanda

Penanda berikut tersedia untuk penyesuaian:

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

Tampilan TRIP_PICKUP_POINT dan TRIP_DROPOFF_POINT selama pemantauan perjalanan.

Tampilan TRIP_VEHICLE selama pemantauan perjalanan. Ikon penanda tidak berubah sesuai dengan jenis kendaraan yang sebenarnya untuk perjalanan. Consumer SDK memperbarui rotasi ikon TRIP_VEHICLE selama pemantauan perjalanan untuk meniru perilaku kendaraan sebenarnya saat melintas di rute.

Opsi penanda

Properti yang dapat disesuaikan yang tersedia untuk setiap penanda adalah kumpulan properti yang disediakan oleh Google Maps MarkerOptions.

MarkerOptions dibuat menggunakan konstruktornya, dan properti yang disesuaikan ditentukan menggunakan metode gaya 'Penyetel'. Nilai default diberikan untuk setiap properti, jadi Anda hanya perlu menentukan nilai kustom.

Anda dapat menonaktifkan penanda dengan menetapkan visible ke false. Data yang memadai harus disediakan untuk memungkinkan Anda menggunakan elemen UI Anda sendiri sebagai penggantinya.

Contoh

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)

Polyline kustom

Penyesuaian polyline ditetapkan menggunakan metode ConsumerMapStyle.setPolylineStyleOptions. Menetapkan opsi polyline kustom akan mengganti nilai default yang diberikan oleh Consumer SDK. Nilai default dapat dipulihkan dengan memanggil setPolylineStyleOptions dengan null untuk parameter PolylineOptions. PolylineOptions aktif dapat diambil menggunakan metode getPolylineStyleOptions.

Jenis polyline

Jenis polyline berikut tersedia untuk penyesuaian:

  • ACTIVE_ROUTE
  • REMAINING_ROUTE

ACTIVE_ROUTE dan REMAINING_ROUTE ditampilkan selama pemantauan perjalanan dan merepresentasikan rute kendaraan.

Properti Polyline

Properti yang dapat disesuaikan yang tersedia untuk setiap polyline disediakan oleh Google Maps PolylineOptions. PolylineOptions dibuat menggunakan konstruktornya, dan properti yang disesuaikan ditentukan menggunakan metode gaya 'Penyetel'. Nilai default diberikan untuk setiap properti, sehingga Anda hanya perlu menentukan nilai kustom. Anda dapat menonaktifkan polyline dengan menetapkan visible ke false.

Contoh

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)

Rute Aktif dan Tersisa

Dengan mengaktifkan Progres Perjalanan dan Pesanan, aplikasi Anda dapat menyesuaikan pengalaman pengguna menggunakan polyline yang menampilkan kendaraan Anda aktif dan rute yang tersisa.

Rute aktif adalah jalur yang saat ini ditempuh kendaraan untuk mencapai titik jalan berikutnya dalam perjalanan aktif konsumen. Rute yang tersisa adalah jalur yang akan dilalui kendaraan setelah rute aktif. Jika titik jalan rute aktif adalah titik jalan perjalanan terakhir, rute yang tersisa tidak akan ada.

Polyline aktif dan yang tersisa dapat disesuaikan dan visibilitas dikontrol oleh aplikasi Anda. Secara default, rute aktif akan terlihat dan rute yang tersisa tidak terlihat.

Contoh

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)

Polyline berbasis traffic

Lapisan lalu lintas polyline dinonaktifkan secara default. Jika diaktifkan, segmen yang mewakili jalur traffic tidak normal akan digambar di atas polyline rute pada PolylineOptions.getZIndex() z-index dan offset, bergantung pada kondisi lalu lintas.

Kondisi lalu lintas direpresentasikan sebagai salah satu dari empat jenis kecepatan. Anda dapat menyesuaikan warna untuk setiap jenis kecepatan.

Untuk mengaktifkan "Polyline berbasis traffic", Anda harus membuat objek TrafficStyle yang kemudian akan diteruskan ke ConsumerMapStyle dengan memanggil setPolylineTrafficStyle().

Contoh

Java

// TrafficStyle is part of the Consumer SDK.
TrafficStyle trafficStyle = TrafficStyle.builder()
  .setTrafficVisibility(true)
  .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
  .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
  .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
  .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
  .build();

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle);

Kotlin

// TrafficStyle is part of the Consumer SDK.
val trafficStyle =
  TrafficStyle.builder()
    .setTrafficVisibility(true)
    .setTrafficColor(SpeedType.NO_DATA, Color.GREY)
    .setTrafficColor(SpeedType.NORMAL_VALUE, Color.BLUE)
    .setTrafficColor(SpeedType.SLOW_VALUE, Color.ORANGE)
    .setTrafficColor(SpeedType.TRAFFIC_JAM, Color.RED)
    .build()

consumerMapStyle.setPolylineTrafficStyle(PolylineType.ACTIVE_ROUTE, trafficStyle)

Menyesuaikan zoom kamera untuk fokus pada perjalanan

Tombol Lokasiku default yang ada di Maps SDK memusatkan kamera di lokasi perangkat. Jika ada sesi Progres Perjalanan dan Pesanan yang aktif, sebaiknya Anda memusatkan kamera untuk berfokus pada perjalanan, bukan lokasi perangkat.

Solusi bawaan SDK Konsumen untuk Android: AutoCamera

Agar Anda dapat berfokus pada perjalanan, bukan lokasi perangkat, Consumer SDK menyediakan fitur AutoCamera yang diaktifkan secara default. Kamera akan memperbesar fokus pada rute Progres Perjalanan dan Pesanan serta titik jalan perjalanan berikutnya.

Menyesuaikan perilaku kamera

Jika memerlukan kontrol lebih terhadap perilaku kamera, Anda dapat menonaktifkan atau mengaktifkan AutoCamera menggunakan ConsumerController.setAutoCameraEnabled().

ConsumerController.getCameraUpdate() menampilkan batas kamera yang direkomendasikan pada saat itu. Anda kemudian dapat memberikan CameraUpdate ini sebagai argumen untuk GoogleMap.moveCamera() atau GoogleMap.animateCamera().