Penyesuaian UI Android

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

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

Penanda kustom

Metode untuk menetapkan jenis penanda dan propertinya adalah ConsumerMapStyle.setMarkerStyleOptions(). Kustom Anda opsi penanda menggantikan nilai default yang disediakan oleh Consumer SDK. Untuk memulihkan nilai default, panggil setMarkerStyleOptions() menggunakan null untuk parameter MarkerOptions. Mengambil MarkerOptions yang aktif menggunakan getMarkerStyleOptions().

Jenis penanda

Penanda berikut tersedia untuk penyesuaian:

  • TRIP_PICKUP_POINT
  • TRIP_DROPOFF_POINT
  • TRIP_INTERMEDIATE_DESTINATION
  • TRIP_VEHICLE

TRIP_PICKUP_POINT dan TRIP_DROPOFF_POINT ditampilkan selama pemantauan perjalanan.

TRIP_VEHICLE ditampilkan selama pemantauan perjalanan. Ikon penanda tidak berubah sesuai dengan jenis kendaraan sebenarnya untuk perjalanan tersebut. Update Consumer SDK rotasi ikon TRIP_VEHICLE selama pemantauan perjalanan untuk meniru perilaku kendaraan yang sebenarnya saat melalui rute tersebut.

Opsi penanda

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

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

Anda dapat menonaktifkan penanda dengan menetapkan visible ke false. Data yang cukup harus diberikan agar Anda dapat 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 mengganti nilai default yang disediakan oleh Consumer SDK. Nilai default dapat dipulihkan dengan memanggil setPolylineStyleOptions dengan null untuk parameter PolylineOptions. Aktif PolylineOptions 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 mewakili 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 'Penyetel' metode gaya. Nilai default disediakan 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 tersisa rute perjalanan.

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

Polyline aktif dan yang tersisa dapat disesuaikan dan visibilitasnya dikontrol oleh aplikasi Anda. Secara default, rute aktif 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. Saat diaktifkan, segmen yang mewakili lalu lintas non-normal akan digambar di atas polyline rute pada z-index PolylineOptions.getZIndex() ditambah offset sesuai dengan kondisi traffic.

Kondisi lalu lintas digambarkan sebagai salah satu 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 berfokus pada perjalanan

Tombol Lokasiku default sebagai fitur bawaan di Maps SDK yang menempatkan kamera di tengah-tengah lokasi perangkat. Jika ada sesi Perjalanan dan Progres Pesanan yang aktif, Anda mungkin ingin untuk fokus 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 Kamera Otomatis yang diaktifkan secara default. Kamera akan memperbesar/memperkecil untuk fokus pada rute Perjalanan dan Progres Pesanan serta titik jalan perjalanan berikutnya.

Menyesuaikan perilaku kamera

Jika memerlukan kontrol lebih besar atas perilaku kamera, Anda dapat menonaktifkan atau mengaktifkan Kamera Otomatis menggunakan ConsumerController.setAutoCameraEnabled().

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

Gaya visual peta berbasis cloud

Baik ConsumerMapView dan ConsumerMapFragment mendukung Gaya visual peta berbasis Cloud. Untuk menggunakan gaya visual peta berbasis cloud, pastikan peta yang dipilih perender adalah LATEST. Contoh berikut menunjukkan cara menggunakan gaya visual peta berbasis cloud dengan project Anda.

ConsumerMapView

Untuk menggunakan gaya visual peta berbasis Cloud di ConsumerMapView, tetapkan Kolom mapId di GoogleMapOptions dan teruskan GoogleMapOptions ke getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) or getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Contoh

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Ada dua cara untuk menggunakan gaya visual peta berbasis Cloud di ConsumerMapFragments:

  1. Secara statis dengan XML.
  2. Secara dinamis dengan newInstance.

Secara statis dengan XML

Untuk menggunakan gaya visual peta berbasis Cloud dengan XML di ConsumerMapFragment, tambahkan atribut XML map:mapId dengan atribut yang ditentukan mapId. Lihat contoh berikut:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Secara dinamis dengan newInstance

Untuk menggunakan gaya visual peta berbasis Cloud dengan newInstance di ConsumerMapFragment, setel kolom mapId pada GoogleMapOptions, lalu teruskan GoogleMapOptions ke newInstance. Lihat contoh berikut:

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}