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 Anda, ikuti langkah-langkah berikut:

  1. Tentukan fragmen peta untuk mengikuti perjalanan.
  2. Menambahkan dukungan untuk pengontrol tampilan dan lapisan dasar peta.
  3. Tambahkan 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 meningkatkan pengalaman visual. Untuk mengetahui detail selengkapnya, lihat bagian 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 sesuai permintaan di aplikasi konsumen. Untuk menentukan peta, ikuti salah satu metode berikut:

  • ConsumerMapFragment: Digunakan untuk menentukan peta Anda dengan Fragment.

  • ConsumerMapView: Digunakan 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 atau tampilan Android, ikuti langkah-langkah berikut dan lihat contoh kode.

  1. Tentukan fragmen atau tampilan dalam file XML tata letak aplikasi Anda yang berada 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 dimodifikasi 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 di fragmen atau 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. Kelas dasar aktivitas atau fragmen harus berupa FragmentActivity atau Fragment dukungan (masing-masing), karena keduanya menyediakan akses ke siklus hidupnya.

    • GoogleMapOptions (yang dapat berupa null), 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 seperti contoh sebelumnya untuk MapView dalam aktivitas, kecuali bahwa fragmen tersebut mengembangkan 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 berbagi kemajuan perjalanan di aplikasi Anda, tambahkan kelas berikut ke aplikasi Anda: ConsumerGoogleMap dan ConsumerController.

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

    ConsumerGoogleMap adalah kelas pembungkus untuk kelas GoogleMap. Ia menggunakan API yang setara dengan GoogleMap sehingga aplikasi Anda dapat berinteraksi dengan peta. Dengan cara ini, aplikasi Anda dapat berinteraksi secara lancar dengan peta Google yang mendasarinya. Misalnya, GoogleMap hanya mengizinkan registrasi panggilan balik tunggal, tetapi ConsumerGoogleMap mendukung panggilan balik terdaftar ganda. Callback ini memungkinkan aplikasi Anda mendaftarkan callback yang dipanggil secara berurutan.

  • Dapatkan ConsumerController dari ConsumerGoogleMap di getConsumerController().

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

Untuk 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: Tambahkan dukungan untuk grafik vektor Android

Jika desain aplikasi Anda memerlukan dukungan untuk grafik vektor, maka tambahkan dukungan untuk perangkat Android dan gambar vektor 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