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. Tentukan fragmen peta untuk mengikuti perjalanan.
  2. Tambahkan dukungan untuk pengontrol tampilan dan lapisan dasar peta.
  3. Tambahkan dukungan untuk grafis vektor Android guna menampilkan peta vektor, jika diperlukan.

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

Langkah 1: Menentukan 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: Gunakan untuk menentukan peta dengan Fragment.

  • ConsumerMapView: Gunakan untuk menentukan peta dengan View.

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

Kedua metode dijelaskan lebih detail 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 kodenya.

  1. Tentukan fragmen atau tampilan di 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 pengendali 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 di file XML tata letak aplikasi, 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 di aktivitas, seperti yang ditentukan dalam file 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(). Selain parameter callback, sertakan detail berikut:

    • Aktivitas atau fragmen yang berisi. Class dasar aktivitas atau fragmen harus berupa FragmentActivity atau Fragmentdukungan (masing-masing), karena keduanya 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: Menambahkan dukungan untuk pengontrol tampilan dan lapisan dasar peta

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

  • Dapatkan ConsumerGoogleMap dari ConsumerMapFragment atau ConsumerMapView, yang keduanya menampilkan ConsumerGoogleMap secara asinkron 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 sama. 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 menyediakan 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 grafis vektor Android

Jika desain aplikasi Anda memerlukan dukungan untuk grafis 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

Menentukan gaya peta