Menata gaya peta

Pilih platform: Android iOS JavaScript

Panduan ini menjelaskan cara menyesuaikan peta yang ditampilkan dalam 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 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.

Class 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) 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 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} aktif, Anda dapat menangani fungsi zoom kamera dan berfokus pada salah satu dari dua cara:

  • AutoCamera: Jika ingin menggunakan AutoCamera, Anda tidak perlu melakukan apa pun. Kamera mengikuti perjalanan. Untuk mengetahui detailnya, lihat AutoCamera

  • Sesuaikan 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 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 untuk mengaktifkannya. Untuk detail selengkapnya, lihat isAutoCameraEnabled

`Kamera Otomatis`

Untuk detail tentang tombol Lokasiku, lihat Tombol Lokasiku di dokumentasi Maps JavaScript API.

Menyesuaikan perilaku kamera

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

  1. Nonaktifkan AutoCamera menggunakan ConsumerController.setAutoCameraEnabled().

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

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

Langkah berikutnya

Mengikuti perjalanan di Android