Karte einrichten

Plattform auswählen: Android iOS

Wenn Sie eine Fahrt in Ihrer Consumer-App verfolgen möchten, müssen Sie zuerst eine Karte definieren und gegebenenfalls Unterstützung für Vektorkarten hinzufügen.

So richten Sie eine Karte in Ihrer App ein:

  1. Definieren Sie ein Kartenfragment, um eine Fahrt zu verfolgen.
  2. Fügen Sie Unterstützung für eine Kartenbasisebene und einen Ansichtscontroller hinzu.
  3. Fügen Sie gegebenenfalls Unterstützung für Android-Vektorgrafiken hinzu, um Vektor karten anzuzeigen.

Nachdem Sie eine Karte definiert haben, können Sie zusätzliche Ansichten und Kamerasteuerelemente hinzufügen, um die visuelle Darstellung anzupassen. Weitere Informationen finden Sie unter Karte gestalten.

Schritt 1: Kartenfragment definieren, um eine Fahrt zu verfolgen

Sie definieren eine Karte, indem Sie ein Kartenfragment oder eine Ansicht hinzufügen, um die Karte zu erstellen, auf der Sie eine On-Demand-Fahrt in Ihrer Consumer-App teilen. Folgen Sie einer der folgenden Methoden, um Ihre Karte zu definieren:

  • ConsumerMapFragment: Verwenden Sie diese Option, um Ihre Karte mit einem Fragment zu definieren.

  • ConsumerMapView: Verwenden Sie diese Option, um eine Karte mit einer View zu definieren.

Die Funktionen sind für beide Methoden gleich. Wählen Sie also die Methode aus, die für Ihre Anwendung besser geeignet ist.

Beide Methoden werden im folgenden Abschnitt ausführlicher erläutert.

Kartenfragment oder -ansicht hinzufügen

Wenn Sie eine Karte erstellen möchten, auf der der Fortschritt einer Fahrt angezeigt wird, verwenden Sie entweder ein Android-Fragment oder eine Ansicht. Folgen Sie dazu dieser Anleitung und sehen Sie sich die Codebeispiele an.

  1. Definieren Sie ein Fragment oder eine Ansicht in der XML-Datei für das Layout Ihrer Anwendung unter /res/layout. Definieren Sie die Fahrtkarte entweder als Fragment mit ConsumerMapFragment oder als Ansicht mit ConsumerMapView.

    Das Fragment oder die Ansicht bietet dann Zugriff auf die Fahrtkarte, auf die Ihre App zugreifen und die sie ändern kann. Die Karte bietet auch ein Handle für ConsumerController, mit dem Ihre App die Consumer-Erfahrung steuern und anpassen kann.

  2. Rufen Sie in der Methode onCreate() die Funktion getConsumerGoogleMapAsync(callback) auf, die ConsumerGoogleMap asynchron im Callback zurückgibt.

  3. Verwenden Sie ConsumerGoogleMap, um den Fortschritt der Fahrt anzuzeigen und bei Bedarf zu aktualisieren.

Beispiel für das Hinzufügen von ConsumerMapFragment

  1. Definieren Sie das Fragment in der XML-Datei für das Layout Ihrer Anwendung, wie im folgenden Codebeispiel gezeigt.

    <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. Rufen Sie die Funktion getConsumerGoogleMapAsync() in der Methode onCreate() auf.

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()!!
         }
       }
     )
   }
 }

Beispiel für das Hinzufügen von ConsumerMapView

  1. Verwenden Sie die Ansicht entweder in einem Fragment oder in einer Aktivität, wie in der XML-Datei definiert.

     <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. Rufen Sie die Funktion getConsumerGoogleMapAsync() in onCreate() auf. Fügen Sie neben dem Callback-Parameter die folgenden Details hinzu:

    • Die enthaltende Aktivität oder das Fragment. Die Basisklasse der Aktivität oder des Fragments muss entweder ein FragmentActivity oder ein Support-Fragment sein, da sie Zugriff auf den Lebenszyklus bietet.

    • GoogleMapOptions (kann null sein) mit Konfigurationsattributen für 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,
    )
  }
}

Eine MapView in einem Fragment ist dasselbe wie im vorherigen Beispiel für MapView in einer Aktivität. Der Unterschied besteht darin, dass das Layout, das MapView enthält, in der Methode onCreateView() des Fragments aufgebläht wird.

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)
  }
}

Schritt 2: Unterstützung für eine Kartenbasisebene und einen Ansichtscontroller hinzufügen

Wenn Sie den Fortschritt einer Fahrt in Ihrer App teilen möchten, fügen Sie Ihrer App die folgenden Klassen hinzu: ConsumerGoogleMap und ConsumerController.

  • Rufen Sie ConsumerGoogleMap entweder von ConsumerMapFragment oder ConsumerMapView ab. Beide geben ConsumerGoogleMap asynchron in ConsumerMapReadyCallback zurück.

    ConsumerGoogleMap ist eine Wrapper-Klasse für die Klasse GoogleMap. Sie verwendet eine API, die GoogleMap entspricht, damit Ihre App mit der Karte interagieren kann. So kann Ihre App nahtlos mit derselben zugrunde liegenden Google-Karte interagieren. Beispielsweise lässt GoogleMap nur eine einzige Callback-Registrierung zu, während ConsumerGoogleMap zwei registrierte Callbacks unterstützt. Mit diesen Callbacks kann Ihre App Callbacks registrieren, die sequenziell aufgerufen werden.

  • Rufen Sie ConsumerController von ConsumerGoogleMap in getConsumerController() ab.

    ConsumerController bietet Zugriff auf Funktionen zum Teilen von Fahrten, z. B. zum Beobachten von Fahrten, zum Steuern des Fahrtstatus und zum Festlegen von Standorten.

Wie Sie ConsumerGoogleMap und ConsumerController in Java und Kotlin zu Ihrer App hinzufügen, erfahren Sie in den folgenden Beispielen.

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,
  }
)

Schritt 3: Unterstützung für Android-Vektorgrafiken hinzufügen

Wenn Ihr App-Design Unterstützung für Vektorgrafiken erfordert, fügen Sie mit diesen Schritten Unterstützung für Android-Geräte und Vektordrawables hinzu:

  1. Fügen Sie Ihrer Aktivität den folgenden Code hinzu. Dieser Code erweitert AppCompatActivity, um die Vektordrawables im Consumer SDK zu verwenden.

Java

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

// ...

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

Kotlin

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

// ...

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

Weitere Informationen

Fahrt in Android verfolgen

Karte gestalten