Menyiapkan peta

Pilih platform: Android iOS

Untuk mengikuti perjalanan dalam aplikasi konsumen, Anda harus terlebih dahulu menentukan peta dan menambahkan dukungan untuk peta vektor, jika diperlukan.

Untuk menyiapkan peta di aplikasi Anda, ikuti langkah-langkah berikut:

  1. Menentukan fragmen peta untuk berbagi perjalanan.
  2. Menambahkan dukungan untuk lapisan dasar peta dan pengontrol tampilan.
  3. Menambahkan dukungan untuk grafik vektor Android untuk menampilkan vektor peta, jika diperlukan.

Setelah menentukan peta, Anda dapat menambahkan tampilan dan kamera tambahan yang ingin Anda sesuaikan pengalaman visualnya. Untuk detail selengkapnya, lihat bagian Menata gaya peta.

Langkah 1: Menentukan fragmen peta untuk berbagi perjalanan

Anda menentukan peta dengan menambahkan fragmen peta atau tampilan untuk membuat peta dengan Anda membagikan perjalanan sesuai permintaan di aplikasi konsumen. Untuk mendefinisikan peta, ikuti salah satu metode berikut:

  • ConsumerMapFragment: Gunakan untuk mendefinisikan peta dengan Fragment.

  • ConsumerMapView: Gunakan untuk mendefinisikan peta dengan View.

Fiturnya sama untuk kedua metode, jadi pilih metode lebih baik untuk aplikasi Anda.

Kedua metode tersebut dijelaskan secara lebih mendetail di bagian berikut.

Menambahkan fragmen atau tampilan peta

Untuk membuat peta guna menampilkan progres perjalanan menggunakan fragmen atau tampilan Android, ikuti langkah-langkah ini dan lihat contoh kode.

  1. Menentukan fragmen atau tampilan dalam file XML tata letak aplikasi yang berada di /res/layout. Tentukan peta berbagi perjalanan sebagai fragmen menggunakan ConsumerMapFragment, atau sebagai tampilan menggunakan ConsumerMapView.

    Fragmen atau tampilan tersebut kemudian memberikan akses ke perjalanan berbagi peta yang dapat diakses dan diubah oleh aplikasi Anda. Peta ini juga menyediakan ke ConsumerController, yang memungkinkan aplikasi Anda mengontrol dan menyesuaikan pengalaman berbagi perjalanan.

  2. Dari metode onCreate() Anda, panggil getConsumerGoogleMapAsync(callback), yang menampilkan ConsumerGoogleMap secara asinkron di callback.

  3. Gunakan ConsumerGoogleMap untuk menampilkan progres dan update perjalanan sesuai kebutuhan.

Contoh cara menambahkan ConsumerMapFragment

  1. Tentukan fragmen dalam file XML tata letak aplikasi Anda, seperti yang ditunjukkan dalam contoh kode berikut.

    <fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

  2. Lakukan panggilan ke getConsumerGoogleMapAsync() dari onCreate() .

Java

 public class SampleAppActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     // Find the ConsumerMapFragment.
     ConsumerMapFragment consumerMapFragment =
         (ConsumerMapFragment) fragmentManager.findFragmentById(R.id.consumer_map_fragment);

     // Initiate the callback that returns the map.
     if (consumerMapFragment != null) {
       consumerMapFragment.getConsumerGoogleMapAsync(
           new ConsumerMapReadyCallback() {
             // The map returned in the callback is used to access the ConsumerController.
             @Override
             public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
               ConsumerController consumerController = consumerGoogleMap.getConsumerController();
             }
           });
     }
   }

 }

Kotlin

 class SampleAppActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     // Find the ConsumerMapFragment.
     val consumerMapFragment =
       fragmentManager.findFragmentById(R.id.consumer_map_fragment) as ConsumerMapFragment

     consumerMapFragment.getConsumerGoogleMapAsync(
       object : ConsumerMapReadyCallback() {
         override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
           val consumerController = consumerGoogleMap.getConsumerController()!!
         }
       }
     )
   }
 }

Contoh cara menambahkan ConsumerMapView

  1. Gunakan tampilan baik dalam fragmen atau aktivitas, seperti yang didefinisikan dalam XML.

     <com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/consumer_map_view"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />

  2. Lakukan panggilan ke getConsumerGoogleMapAsync() dari onCreate(). Di beberapa selain parameter callback, sertakan detail berikut:

    • Aktivitas atau fragmen yang memuatnya. Basis aktivitas atau fragmen harus berupa FragmentActivity atau Fragment dukungan (masing-masing), karena menyediakan akses ke siklus prosesnya.

    • GoogleMapOptions (yang bisa berupa null), yang berisi konfigurasi atribut untuk MapView.

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            // The map returned in the callback is used to access the ConsumerController.
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              ConsumerController consumerController = consumerGoogleMap.getConsumerController();
            }
          }, this, null);
    }
  }

}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    mapView.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        // The map returned in the callback is used to access the ConsumerController.
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          val consumerController = consumerGoogleMap.getConsumerController()!!
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ null,
    )
  }
}

MapView dalam fragmen sama dengan contoh sebelumnya untuk MapView dalam aktivitas, kecuali bahwa fragmen meng-inflate tata letak yang menyertakan MapView dalam metode onCreateView() fragmen.

Java

public class MapViewInFragment extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater layoutInflater,
      @Nullable ViewGroup viewGroup,
      @Nullable Bundle bundle) {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false);
  }

}

Kotlin

class MapViewInFragment : Fragment() {
  override fun onCreateView(
    layoutInflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?,
  ): View {
    return layoutInflater.inflate(R.layout.consumer_map_view, viewGroup, false)
  }
}

Langkah 2: Menambahkan dukungan untuk lapisan dasar peta dan pengontrol tampilan

Untuk mengaktifkan berbagi perjalanan di aplikasi Anda, tambahkan class berikut ke aplikasi Anda: ConsumerGoogleMap dan ConsumerController.

  • Dapatkan ConsumerGoogleMap dari ConsumerMapFragment atau ConsumerMapView, yang keduanya secara asinkron menampilkan ConsumerGoogleMap dalam ConsumerMapReadyCallback.

    ConsumerGoogleMap adalah class wrapper untuk class GoogleMap. Proses ini menggunakan API yang setara dengan GoogleMap agar aplikasi Anda dapat berinteraksi dengan peta. Dengan cara ini, aplikasi Anda dapat berinteraksi secara lancar dengan layanan dasar Google yang sama peta. Misalnya, GoogleMap hanya mengizinkan pendaftaran callback tunggal, tetapi ConsumerGoogleMap mendukung callback terdaftar ganda. Callback ini memungkinkan aplikasi Anda mendaftarkan callback yang dipanggil secara berurutan.

  • Dapatkan ConsumerController dari ConsumerGoogleMap di getConsumerController().

    ConsumerController memberikan akses ke fitur berbagi perjalanan seperti seperti memantau perjalanan, mengontrol status perjalanan, dan menetapkan lokasi.

Untuk mengetahui cara menambahkan ConsumerGoogleMap dan ConsumerController ke aplikasi Anda di Java dan Kotlin, lihat contoh berikut.

Java

private ConsumerGoogleMap consumerGoogleMap;
private ConsumerController consumerController;
private ConsumerMapView consumerMapView;

consumerMapView.getConsumerGoogleMapAsync(
    new ConsumerMapReadyCallback() {
      @Override
      public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerMap) {
        consumerGoogleMap = consumerMap;
        consumerController = consumerMap.getConsumerController();
      }
    },
    this, null);

Kotlin

var consumerGoogleMap: ConsumerGoogleMap
var consumerController: ConsumerController
val consumerMapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

consumerMapView.getConsumerGoogleMapAsync(
  object : ConsumerMapReadyCallback() {
    override fun onConsumerMapReady(consumerMap: ConsumerGoogleMap) {
      consumerGoogleMap = consumerMap
      consumerController = consumerMap.getConsumerController()
    },
    /* fragmentActivity= */ this,
    /* googleMapOptions= */ null,
  }
)

Langkah 3: Menambahkan dukungan untuk grafik vektor Android

Jika desain aplikasi Anda memerlukan dukungan untuk grafik vektor, tambahkan dukungan untuk Perangkat Android dan vektor drawable menggunakan langkah-langkah berikut:

  1. Tambahkan kode berikut ke Aktivitas Anda. Kode ini memperluas AppCompatActivity untuk menggunakan Vektor drawable di Consumer SDK.

Java

// ...
import android.support.v7.app.AppCompatActivity;

// ...

public class ConsumerTestActivity extends AppCompatActivity {
  // ...
}

Kotlin

// ...
import android.support.v7.app.AppCompatActivity

// ...

class ConsumerTestActivity : AppCompatActivity() {
  // ...
}

Langkah Berikutnya

Mengikuti perjalanan di Android Menata gaya peta