Menata gaya peta

Pilih platform: Android iOS JavaScript

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

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 menggunakan AutoCamera, Anda tidak perlu melakukan apa pun. Kamera 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 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.

`AutoCamera`

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.

  1. Nonaktifkan AutoCamera menggunakan ConsumerController.setAutoCameraEnabled().

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

  3. Berikan CameraUpdate sebagai argumen untuk salah satu fungsi Android ini:

Langkah berikutnya

Mengikuti perjalanan di Android