Menyiapkan peta

Pilih platform: Android iOS

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

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

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

Setelah menentukan peta, Anda dapat menambahkan tampilan dan kontrol kamera tambahan yang ingin disesuaikan untuk pengalaman visual. Untuk mengetahui detail selengkapnya, lihat Menata gaya peta.

Langkah 1: Tentukan fragmen peta untuk mengikuti perjalanan

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

  • ConsumerMapFragment: Gunakan untuk menentukan peta dengan Fragment.

  • ConsumerMapView: Gunakan untuk menentukan peta dengan View.

Fiturnya sama untuk kedua metode, jadi pilih metode mana yang 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 Android atau tampilan, ikuti langkah-langkah berikut dan lihat contoh kode.

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

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

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

  3. Gunakan ConsumerGoogleMap untuk menampilkan progres perjalanan dan memperbarui 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 metode 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 dalam fragmen atau dalam aktivitas, seperti yang ditentukan dalam file XML Anda.

     <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(). Selain parameter callback, sertakan detail berikut:

    • Aktivitas atau fragmen yang berisi. Class dasar aktivitas atau fragmen harus berupa FragmentActivity atau Fragment dukungan (masing-masing), karena class tersebut memberikan akses ke siklus prosesnya.

    • GoogleMapOptions (yang dapat berupa null), yang berisi atribut konfigurasi 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: Tambahkan dukungan untuk lapisan dasar peta dan pengontrol tampilan

Untuk membagikan progres perjalanan di aplikasi, tambahkan class berikut ke aplikasi Anda: ConsumerGoogleMap dan ConsumerController.

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

    ConsumerGoogleMap adalah class wrapper untuk class GoogleMap. Class ini menggunakan API yang setara dengan GoogleMap sehingga aplikasi Anda dapat berinteraksi dengan peta. Dengan cara ini, aplikasi Anda dapat berinteraksi dengan lancar dengan peta Google yang mendasarinya. Misalnya, GoogleMap hanya mengizinkan satu pendaftaran callback, 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 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 drawable Vektor 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

Melacak perjalanan di Android

Menata gaya peta