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:
- Secara statis dengan XML.
- 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
}
}