Panduan ini menjelaskan cara menyesuaikan peta yang ditampilkan di aplikasi Android saat Anda mengikuti perjalanan. Anda dapat menyesuaikan tampilan dan nuansa peta dengan cara berikut:
- Menata gaya peta dengan gaya visual peta berbasis cloud
- Menyesuaikan kamera untuk berfokus pada perjalanan
- Menyesuaikan penanda
- Menyesuaikan polyline
Menata gaya peta dengan gaya visual peta berbasis Cloud
Sesuaikan tampilan dan nuansa komponen peta menggunakan Gaya visual peta berbasis Cloud. Anda membuat dan mengedit gaya peta di konsol Google Cloud untuk setiap aplikasi yang menggunakan Google Maps, tanpa memerlukan perubahan pada kode. Untuk informasi selengkapnya, lihat Gaya visual peta berbasis Cloud.
Class
ConsumerMapView
dan
ConsumerMapFragment
mendukung gaya visual peta berbasis cloud.
Untuk menggunakan gaya visual peta berbasis cloud, pastikan perender peta yang dipilih adalah LATEST
. Bagian berikut menunjukkan contoh cara menggunakan gaya peta berbasis cloud dengan project Anda.
ConsumerMapView
Untuk menggunakan gaya visual peta berbasis cloud di ConsumerMapView
, tetapkan
kolom mapId
pada GoogleMapOptions
lalu teruskan GoogleMapOptions
ke
getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment,
GoogleMapOptions)
atau 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
mapId
yang ditentukan. 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
, tetapkan kolom mapId
di GoogleMapOptions
dan 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 perjalanan aktif, Anda dapat menangani zoom dan fokus kamera dengan salah satu dari dua cara berikut:
AutoCamera
: Jika ingin menggunakanAutoCamera
, Anda tidak perlu melakukan apa pun. Kamera mengikuti perjalanan. Untuk mengetahui detailnya, lihatAutoCamera
.Menyesuaikan perilaku kamera: Untuk menyesuaikan perilaku kamera, Anda harus menonaktifkan
AutoCamera
, lalu melakukan penyesuaian. Untuk mengetahui detailnya, lihat Menyesuaikan perilaku kamera.
AutoCamera
menempatkan kamera di tengah
Consumer SDK menyediakan fitur AutoCamera
yang diaktifkan secara default
di tombol Lokasi Saya bawaan untuk Maps SDK. Kamera akan melakukan zoom untuk
berfokus pada rute perjalanan dan titik jalan perjalanan berikutnya.
Jika Anda ingin menggunakan AutoCamera
, pastikan untuk mengaktifkannya. Untuk detail selengkapnya, lihat
isAutoCameraEnabled
.
Untuk mengetahui detail tentang tombol Lokasi Saya, lihat Tombol Lokasi Saya dalam dokumentasi Maps JavaScript API.
Menyesuaikan perilaku kamera
Untuk kontrol perilaku kamera yang lebih besar, ikuti langkah-langkah berikut untuk menonaktifkan
AutoCamera
dan menyesuaikan perilaku kamera secara manual.
Nonaktifkan
AutoCamera
menggunakan ConsumerController.setAutoCameraEnabled().Mendapatkan batas kamera yang direkomendasikan menggunakan ConsumerController.getCameraUpdate().
Berikan
CameraUpdate
sebagai argumen untuk salah satu fungsi Android ini: