Menata gaya peta

Pilih platform: Android iOS JavaScript

Panduan ini menjelaskan cara menyesuaikan peta yang ditampilkan di aplikasi Android Anda saat Anda mengikuti perjalanan. Anda dapat menyesuaikan tampilan peta dengan cara berikut:

Menata gaya peta dengan gaya visual peta berbasis Cloud

Sesuaikan tampilan 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.

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

Menyesuaikan 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 menggunakan AutoCamera, Anda tidak perlu melakukan apa pun. Kamera akan mengikuti perjalanan. Untuk mengetahui detailnya, lihat AutoCamera.

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

AutoCamera memusatkan kamera

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

Jika ingin menggunakan AutoCamera, pastikan untuk mengaktifkannya. Untuk mengetahui detail selengkapnya, lihat isAutoCameraEnabled.

`AutoCamera`

Untuk mengetahui detail tombol Lokasi Saya, lihat tombol Lokasi Saya di dokumentasi Maps JavaScript API.

Menyesuaikan perilaku kamera

Untuk mengontrol perilaku kamera lebih lanjut, ikuti langkah-langkah berikut untuk menonaktifkan AutoCamera dan menyesuaikan perilaku kamera secara manual.

  1. Nonaktifkan AutoCamera menggunakan ConsumerController.setAutoCameraEnabled().

  2. Dapatkan batas kamera yang direkomendasikan menggunakan ConsumerController.getCameraUpdate().

  3. Berikan CameraUpdate sebagai argumen ke salah satu fungsi Android berikut:

Langkah berikutnya

Mengikuti perjalanan di Android