Panduan ini menjelaskan cara menata gaya peta yang ditampilkan di aplikasi iOS saat mengikuti perjalanan.
Sebelum memulai
Sebelum menata gaya peta, Anda harus memiliki aplikasi konsumen dengan menerapkan hal-hal berikut:
Tampilan peta. Lihat Melakukan inisialisasi tampilan peta.
Cara untuk menangani peristiwa tampilan peta. Lihat Menangani peristiwa tampilan peta
Anda juga harus menyiapkan layanan backend yang dibutuhkan oleh SDK Konsumen, dan menyiapkan Consumer SDK. Untuk mengetahui detailnya, lihat Menyiapkan Consumer SDK dan Apa itu Fleet Engine?.
Penyesuaian peta
Penyesuaian yang tersedia adalah sebagai berikut:
Menata gaya peta: Anda dapat menata gaya warna peta, polyline, dan fitur peta lainnya menggunakan gaya visual peta berbasis Cloud. Lihat bagian Menata gaya peta.
Menyesuaikan zoom kamera: Anda dapat menggunakan fitur bawaan atau menyetel zoom Anda sendiri opsi kamera untuk fokus dalam perjalanan. Lihat Sesuaikan zoom kamera untuk berfokus pada perjalanan.
Menyesuaikan penanda dan polyline: Anda dapat menambahkan rute dan penanda kustom polyline ke desain aplikasi Anda. Elemen desain ini memungkinkan Konsumen untuk menampilkan pratinjau dinamis rute kendaraan. Lihat Menyesuaikan penanda dan Menyesuaikan polyline.
SDK menyediakan opsi ini melalui
consumerMapStyleCoordinator
saat ini. Properti ini tersedia melalui classGMTCMapView
.
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
}
}
Sesuaikan zoom kamera untuk berfokus pada perjalanan
Selama sesi berbagi {i>user journey<i} yang aktif, sangat membantu pengguna untuk melihat
tampilan kendaraan yang lebih besar di sepanjang perjalanannya, bukan dari dekat
perspektif kendaraan pada suatu rute. Untuk melakukannya, sesuaikan zoom kamera
menggunakan AutoCamera
bawaan atau dengan menyesuaikan perilaku kamera
diri Anda sebagai berikut:
AutoCamera
: Jika ingin menggunakanAutoCamera
, Anda tidak memiliki untuk melakukan apa pun. Kamera mengikuti perjalanan secara default.Sesuaikan perilaku kamera: Untuk menyesuaikan perilaku kamera, Anda harus menonaktifkan
AutoCamera
, lalu melakukan penyesuaian.
AutoCamera
menempatkan kamera di tengah secara default
Consumer SDK menyediakan fitur AutoCamera
yang diaktifkan secara default
tombol My Location bawaan untuk Maps SDK. Kamera akan memperbesar
fokus pada rute berbagi perjalanan
dan titik jalan perjalanan berikutnya.
Jika Anda ingin menggunakan AutoCamera
, pastikan fitur tersebut diaktifkan. Untuk detail selengkapnya, lihat
allowCameraAutoUpdate
Untuk mengetahui detail tentang tombol Lokasiku untuk Maps SDK, lihat Tombol Lokasiku di dokumentasi Maps SDK for iOS.
Menyesuaikan perilaku kamera
Untuk kontrol lebih besar terhadap perilaku kamera, Anda dapat menonaktifkan AutoCamera
dan
menyesuaikan perilaku kamera.
Nonaktifkan atau aktifkan AutoCamera
dengan
AllowCameraAutoUpdate
saat ini.
Untuk penyesuaian kamera lainnya, lihat Menggerakkan kamera di dokumentasi Maps SDK for iOS.