Dokumen ini membahas cara menyesuaikan tampilan dan nuansa peta dan kontrol opsi visibilitas data dan area pandang. Anda dapat melakukannya dengan beberapa cara berikut:
- Menggunakan gaya visual peta berbasis cloud
- Menetapkan opsi gaya peta langsung dalam kode Anda sendiri
Menata gaya peta dengan gaya visual peta berbasis Cloud
Menyesuaikan tampilan dan nuansa komponen peta menggunakan peta berbasis cloud gaya visual. Anda dapat membuat dan mengedit gaya peta di Konsol Google Cloud untuk aplikasi Anda yang menggunakan Google Maps, tanpa memerlukan perubahan pada kode. Untuk informasi selengkapnya, lihat 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
. Bagian berikut menunjukkan contoh 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
}
}
Untuk menerapkan gaya peta ke peta berbagi perjalanan konsumen JavaScript, tentukan
mapId
dan
yang lainnya
mapOptions
saat Anda membuat JourneySharingMapView
.
Contoh berikut menunjukkan cara menerapkan gaya peta dengan ID peta.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
Menata gaya peta langsung dalam kode Anda sendiri
Anda juga dapat menyesuaikan gaya visual peta dengan menetapkan opsi peta saat membuat
JourneySharingMapView
. Contoh berikut menunjukkan cara menata gaya peta menggunakan
opsi peta. Untuk informasi selengkapnya mengenai opsi peta yang dapat Anda tetapkan, lihat
mapOptions
dalam referensi Google Maps JavaScript API.
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
Mengontrol visibilitas data tugas ke SDK
Anda dapat mengontrol visibilitas objek tugas tertentu di peta menggunakan aturan visibilitas.
Visibilitas default data tugas
Secara default, data untuk tugas yang diberikan ke kendaraan terlihat saat kendaraan berada dalam jarak 5 perhentian dari tugas. Visibilitas berakhir saat tugas diselesaikan atau dibatalkan.
Tabel ini menampilkan visibilitas default untuk setiap jenis tugas. Anda dapat menyesuaikan visibilitas untuk banyak tugas, tetapi tidak semua. Untuk detail selengkapnya tentang tugas jenis tugas, lihat Jenis tugas di panduan Tugas terjadwal.
Jenis tugas | Visibilitas default | Dapat disesuaikan? | Deskripsi |
---|---|---|---|
Tugas ketidaktersediaan | Tidak terlihat | Tidak | Digunakan untuk pengemudi yang beristirahat dan mengisi bahan bakar. Jika rute ke tugas pengiriman juga berisi perhentian kendaraan lain, perhentian tersebut tidak ditampilkan jika hanya berisi tugas ketidaktersediaan. Perkiraan waktu tiba dan perkiraan waktu penyelesaian tugas masih ditampilkan tugas itu sendiri. |
Buka tugas kendaraan | Dapat dilihat | Ya | Visibilitas berakhir saat tugas selesai atau dibatalkan. Anda dapat menyesuaikan visibilitas tugas kendaraan terbuka. Lihat Sesuaikan visibilitas visibilitas tugas kendaraan umum. |
Tugas kendaraan yang ditutup | Tidak terlihat | Tidak | Anda tidak dapat menyesuaikan visibilitas tugas kendaraan yang ditutup. |
Sesuaikan visibilitas tugas kendaraan terbuka
Antarmuka TaskTrackingInfo
menyediakan sejumlah elemen data tugas
yang dapat dilihat dengan Consumer SDK.
Elemen data tugas yang dapat disesuaikan | |
---|---|
Merutekan polyline Perkiraan waktu tiba Perkiraan waktu penyelesaian tugas |
Jarak mengemudi lainnya ke tugas Jumlah perhentian tersisa Lokasi kendaraan |
Opsi visibilitas per tugas
Anda bisa menyesuaikan konfigurasi visibilitas per tugas dengan mengatur
TaskTrackingViewConfig
saat membuat atau memperbarui tugas dalam
Fleet Engine. Gunakan opsi visibilitas berikut guna membuat kriteria untuk
menentukan visibilitas elemen tugas:
Opsi visibilitas | ||
---|---|---|
Jumlah perhentian tersisa Durasi hingga perkiraan waktu kedatangan Jarak mengemudi tersisa |
Selalu terlihat Tidak pernah terlihat |
Sebagai ilustrasi, misalkan sebuah contoh penyesuaian menyesuaikan visibilitas selama tiga elemen data menggunakan kriteria yang ditampilkan dalam tabel berikut. Lainnya elemen mengikuti aturan visibilitas {i>default<i}.
Elemen data yang akan disesuaikan | Visibilitas | Kriteria |
---|---|---|
Polyline rute | Tampilkan | Kendaraan berada dalam 3 perhentian. |
PWT | Tampilkan | Jarak mengemudi yang tersisa kurang dari 5.000 meter. |
Jumlah perhentian tersisa | Jangan tampilkan | Kendaraan berada dalam 3 perhentian. |
Contoh berikut menunjukkan konfigurasi ini:
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
Polyline rute dan aturan visibilitas lokasi kendaraan
Polyline rute tidak dapat terlihat kecuali jika lokasi kendaraan juga visible; jika tidak, lokasi kendaraan dapat disimpulkan pada akhir polyline.
Panduan ini membantu Anda memberikan kombinasi yang valid untuk rute polyline dan opsi visibilitas lokasi kendaraan.
Opsi visibilitas yang sama | Kriteria visibilitas | Panduan |
---|---|---|
Opsi polyline rute yang disetel ke selalu terlihat. | Setel lokasi kendaraan agar selalu terlihat. | |
Lokasi kendaraan disetel ke tidak pernah terlihat. | Tetapkan polyline rute ke tidak pernah terlihat. | |
Opsi visibilitas adalah salah satu dari:
|
Tetapkan opsi polyline rute ke nilai yang kurang dari atau sama dengan nilai yang ditetapkan untuk lokasi kendaraan. Contoh: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, } |
|
Opsi visibilitas yang berbeda | Kriteria visibilitas | Panduan |
Lokasi kendaraan terlihat | Hal ini hanya terjadi saat kedua lokasi kendaraan dan opsi visibilitas polyline terpenuhi. Contoh: "taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, } Dalam contoh ini, lokasi kendaraan hanya terlihat jika sisa jumlah perhentian minimal 3 DAN sisa mengemudi jarak minimal 3000 meter. |
Nonaktifkan penyesuaian otomatis
Anda dapat menghentikan peta agar tidak otomatis menyesuaikan area pandang ke kendaraan dan rute yang diantisipasi dengan menonaktifkan pencocokan otomatis. Contoh berikut menunjukkan cara menonaktifkan penyesuaian otomatis saat Anda mengonfigurasi berbagi perjalanan tampilan peta.
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});