Menata gaya peta

Panduan ini menjelaskan cara Anda dapat menata gaya peta yang ditampilkan di aplikasi iOS saat mengikuti perjalanan.

Sebelum memulai

Sebelum menata peta, Anda harus memiliki aplikasi konsumen dengan hal-hal berikut yang diterapkan:

• Tampilan peta. Lihat Lakukan inisialisasi tampilan peta.

• Cara menangani peristiwa tampilan peta. Lihat Menangani peristiwa tampilan peta

Anda juga perlu menyiapkan layanan backend yang diperlukan Consumer SDK, 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 Menata gaya peta.

• Menyesuaikan zoom kamera: Anda dapat menggunakan fitur bawaan atau menetapkan opsi kamera sendiri untuk berfokus pada perjalanan. Lihat Menyesuaikan zoom kamera untuk memfokuskan perjalanan.

• Menyesuaikan penanda dan polyline: Anda dapat menambahkan penanda kustom dan polyline rute ke desain aplikasi Anda. Elemen desain ini memungkinkan aplikasi Konsumen Anda menampilkan pratinjau dinamis rute kendaraan. Lihat Menyesuaikan penanda dan Menyesuaikan polyline.

  SDK menyediakan opsi ini melalui properti consumerMapStyleCoordinator. Properti ini tersedia melalui class GMTCMapView.

Menata gaya peta dengan gaya visual peta berbasis cloud

Sesuaikan tampilan dan nuansa komponen peta menggunakan gaya visual peta berbasis cloud. Anda dapat membuat dan mengedit gaya peta di Konsol Google Cloud untuk setiap aplikasi yang menggunakan Google Maps, tanpa memerlukan perubahan pada kode Anda. Untuk mengetahui informasi selengkapnya, pilih platform Anda di Gaya visual peta berbasis cloud.

Kelas 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 penataan 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) atau getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Contoh

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);
    }
  }
}

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:

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;
  }
}

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
  }
}

Menyesuaikan zoom kamera untuk memfokuskan perjalanan

Selama sesi berbagi perjalanan aktif, pengguna akan lebih terbantu jika melihat tampilan kendaraan yang lebih besar sepanjang perjalanannya, bukan perspektif close-up kendaraan di rute. Untuk melakukannya, Anda menyesuaikan tingkat zoom kamera menggunakan AutoCamera bawaan atau menyesuaikan sendiri perilaku kamera sebagai berikut:

• AutoCamera: Jika ingin menggunakan AutoCamera, Anda tidak perlu melakukan apa pun. Kamera mengikuti perjalanan secara default.

• Menyesuaikan perilaku kamera: Untuk menyesuaikan perilaku kamera, Anda harus menonaktifkan AutoCamera, lalu melakukan penyesuaian.

AutoCamera memusatkan kamera secara default

Consumer SDK menyediakan fitur AutoCamera yang diaktifkan secara default pada tombol Lokasi Saya bawaan untuk Maps SDK. Kamera akan melakukan zoom untuk memfokuskan rute perjalanan dan titik jalan berikutnya.

Jika Anda ingin menggunakan AutoCamera, pastikan fitur ini diaktifkan. Untuk detail selengkapnya, lihat allowCameraAutoUpdate.

Untuk mengetahui detail tombol Lokasi Saya untuk Maps SDK, lihat Tombol Lokasi Saya dalam dokumentasi Maps SDK for iOS.

Menyesuaikan perilaku kamera

Untuk mengontrol perilaku kamera secara lebih baik, Anda dapat menonaktifkan AutoCamera dan menyesuaikan perilaku kamera.

Nonaktifkan atau aktifkan AutoCamera dengan properti AllowCameraAutoUpdate.

Untuk penyesuaian kamera lainnya, lihat Memindahkan kamera dalam dokumentasi Maps SDK for iOS.

Langkah berikutnya

Mengikuti perjalanan di iOS