Karte einrichten

Plattform auswählen: Android iOS

Wenn Sie eine Fahrt in Ihrer Verbraucher-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. Kartenfragment definieren, das einer Fahrt folgt
  2. Unterstützung für eine Kartengrundkarte und einen Ansichtscontroller hinzufügen
  3. Fügen Sie bei Bedarf Unterstützung für Android-Vektorgrafiken hinzu, um Vektorkarten anzuzeigen.

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

Schritt 1: Kartenfragment für eine Route definieren

Sie definieren eine Karte, indem Sie ein Kartenfragment oder eine Kartenansicht hinzufügen, um die Karte zu erstellen, auf der Sie eine Fahrt auf Abruf in Ihrer Verbraucher-App teilen. Verwenden Sie eine der folgenden Methoden, um die Karte zu definieren:

  • ConsumerMapFragment: Hiermit können Sie Ihre Karte mit einem Fragment definieren.

  • ConsumerMapView: Damit können Sie eine Karte mit einer View definieren.

Die Funktionen sind für beide Methoden identisch. Wählen Sie daher die Methode aus, die für Ihre Anwendung am besten geeignet ist.

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

Kartenfragment oder -ansicht hinzufügen

Wenn Sie eine Karte erstellen möchten, um den Fahrtverlauf mit einem Android-Fragment oder einer Ansicht anzuzeigen, folgen Sie diesen Schritten und sehen Sie sich die Codebeispiele an.

  1. Definieren Sie ein Fragment oder eine Ansicht in der XML-Datei des Anwendungslayouts unter /res/layout. Definiere die Routenkarte entweder als Fragment mit ConsumerMapFragment oder als Ansicht mit ConsumerMapView.

    Das Fragment oder die Ansicht bietet dann Zugriff auf die Fahrtenkarte, auf die Ihre App zugreifen und die sie ändern kann. Die Karte enthält auch einen Handle für die ConsumerController, mit dem Sie die Nutzererfahrung in Ihrer App steuern und anpassen können.

  2. Rufen Sie in Ihrer onCreate()-Methode getConsumerGoogleMapAsync(callback) auf, die die ConsumerGoogleMap asynchron im Rückruf zurückgibt.

  3. Mit der Taste ConsumerGoogleMap können Sie den Fortschritt der Fahrt anzeigen und nach Bedarf aktualisieren.

Beispiel für das Hinzufügen von ConsumerMapFragment

  1. Definieren Sie das Fragment in der XML-Datei des Anwendungslayouts, 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 getConsumerGoogleMapAsync() über die 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 Ihrer 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 getConsumerGoogleMapAsync() von onCreate() aus an. Geben Sie zusätzlich zum Rückrufparameter die folgenden Details an:

    • Die enthaltene Aktivität oder das enthaltene Fragment. Die Basisklasse der Aktivität oder des Fragments muss entweder eine FragmentActivity oder eine unterstützende Fragment sein, da sie Zugriff auf den Lebenszyklus bietet.

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

Ein MapView in einem Fragment entspricht dem MapView in einer Aktivität aus dem vorherigen Beispiel, mit der Ausnahme, dass das Fragment das Layout mit dem MapView in der Fragmentmethode onCreateView() aufbläst.

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 Kartengrundlage und einen Ansichtscontroller hinzufügen

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

  • ConsumerGoogleMap wird entweder von ConsumerMapFragment oder ConsumerMapView abgerufen, die beide asynchron ConsumerGoogleMap in ConsumerMapReadyCallback zurückgeben.

    ConsumerGoogleMap ist eine Wrapper-Klasse für die Klasse GoogleMap. Es 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 erlaubt GoogleMap nur eine einzelne Callback-Registrierung, während ConsumerGoogleMap doppelt registrierte Callbacks unterstützt. Mit diesen Callbacks kann Ihre App Callbacks registrieren, die nacheinander aufgerufen werden.

  • ConsumerController von ConsumerGoogleMap in getConsumerController() erhalten

    ConsumerController bietet Zugriff auf Funktionen zur Freigabe von Fahrten, z. B. zum Überwachen von Fahrten, zum Steuern des Fahrtstatus und zum Festlegen von Standorten.

In den folgenden Beispielen wird gezeigt, wie Sie ConsumerGoogleMap und ConsumerController in Java und Kotlin zu Ihrer App hinzufügen.

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 für Ihr App-Design Unterstützung für Vektorgrafiken erforderlich ist, fügen Sie Unterstützung für Android-Geräte und Vektorgrafiken hinzu. Gehen Sie dazu so vor:

  1. Fügen Sie Ihrer Aktivität den folgenden Code hinzu. Mit diesem Code wird AppCompatActivity erweitert, um die Vektorgrafiken 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 auf Android-Geräten verfolgen

Kartenstil festlegen