Karte gestalten

Plattform auswählen: Android iOS JavaScript

In diesem Leitfaden wird beschrieben, wie Sie die Karte gestalten können, die in Ihrer iOS-App angezeigt wird, wenn eine Fahrt verfolgt wird.

Hinweis

Bevor Sie eine Karte gestalten können, benötigen Sie eine Verbraucher-App, in der Folgendes implementiert ist:

Außerdem müssen Sie die vom Consumer SDK benötigten Backend-Dienste und das Consumer SDK selbst einrichten. Weitere Informationen finden Sie unter Consumer SDK einrichten und Was ist die Fleet Engine?.

Kartenanpassungen

Folgende Anpassungen sind verfügbar:

  • Karten gestalten: Mit dem cloudbasierten Gestalten von Karteninhalten können Sie Farben, Polylinien und andere Kartenelemente anpassen. Weitere Informationen finden Sie unter Karte gestalten.

  • Kamerazoom anpassen: Sie können die integrierte Funktion verwenden oder eigene Kameraoptionen festlegen, um den Fokus auf eine Fahrt zu legen. Weitere Informationen finden Sie unter Kamerazoom anpassen, um den Fokus auf eine Fahrt zu legen.

  • Markierungen und Polylinien anpassen: Sie können Ihrem App-Design benutzerdefinierte Markierungen und Routen-Polylinien hinzufügen. Mit diesen Designelementen kann Ihre Verbraucher-App eine dynamische Vorschau der Route des Fahrzeugs anzeigen. Weitere Informationen finden Sie unter Markierungen anpassen und Polylinien anpassen.

    Das SDK stellt diese Optionen über das Attribut consumerMapStyleCoordinator bereit. Diese Eigenschaft ist über die Klasse GMTCMapView verfügbar.

Karten mit cloudbasiertem Gestalten von Karteninhalten anpassen

Sie können das Erscheinungsbild der Kartenkomponente mithilfe des cloudbasierten Gestaltens von Karteninhalten anpassen. Sie können Kartenstile in der Google Cloud Console für alle Ihre Apps, in denen Google Maps verwendet wird, erstellen und bearbeiten, ohne dass Änderungen am Code erforderlich sind. Weitere Informationen finden Sie unter Cloudbasiertes Gestalten von Karteninhalten. Wählen Sie dort Ihre Plattform aus.

Sowohl die Klasse ConsumerMapView als auch die Klasse ConsumerMapFragment unterstützen das cloudbasierte Gestalten von Karteninhalten. Wenn Sie das cloudbasierte Gestalten von Karteninhalten verwenden möchten, muss der ausgewählte Karten-Renderer LATEST sein. In den folgenden Abschnitten finden Sie Beispiele für die Verwendung des cloudbasierten Gestaltens von Karteninhalten in Ihrem Projekt.

ConsumerMapView

Wenn Sie das cloudbasierte Gestalten von Karteninhalten im ConsumerMapView verwenden möchten, legen Sie das Feld mapId für GoogleMapOptions fest und übergeben Sie GoogleMapOptions an getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) oder getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions).

Beispiel

Java

public class SampleAppActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ConsumerMapView mapView = findViewById(R.id.consumer_map_view);

    if (mapView != null) {
      GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
      mapView.getConsumerGoogleMapAsync(
          new ConsumerMapReadyCallback() {
            @Override
            public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
              // ...
            }
          },
          /* fragmentActivity= */ this,
          /* googleMapOptions= */ optionsWithMapId);
    }
  }
}

Kotlin

class SampleAppActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val mapView = findViewById(R.id.consumer_map_view) as ConsumerMapView

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    mapView.getConsumerGoogleMapAsync(
      object : ConsumerGoogleMap.ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      },
      /* fragmentActivity= */ this,
      /* googleMapOptions= */ optionsWithMapId)
  }
}

ConsumerMapFragment

Es gibt zwei Möglichkeiten, das cloudbasierte Gestalten von Karteninhalten in ConsumerMapFragments zu verwenden:

  • Statisch mit dem XML.
  • Dynamisch mit newInstance.

Statisch mit der XML-Datei

Wenn Sie das cloudbasierte Gestalten von Karteninhalten mit dem XML-Code in der ConsumerMapFragment-Datei verwenden möchten, fügen Sie das XML-Attribut map:mapId mit der angegebenen mapId hinzu. Sehen Sie sich folgendes Beispiel an:

<fragment
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:name="com.google.android.libraries.mapsplatform.transportation.consumer.view.ConsumerMapFragment"
    android:id="@+id/consumer_map_fragment"
    map:mapId="map-id"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Dynamisch mit newInstance

Wenn Sie das cloudbasierte Gestalten von Karteninhalten mit newInstance in ConsumerMapFragment verwenden möchten, legen Sie das Feld mapId für GoogleMapOptions fest und übergeben Sie GoogleMapOptions an newInstance. Sehen Sie sich folgendes Beispiel an:

Java

public class SampleFragmentJ extends Fragment {

  @Override
  public View onCreateView(
      @NonNull LayoutInflater inflater,
      @Nullable ViewGroup container,
      @Nullable Bundle savedInstanceState) {

    final View view = inflater.inflate(R.layout.consumer_map_fragment, container, false);

    GoogleMapOptions optionsWithMapId = new GoogleMapOptions().mapId("map-id");
    ConsumerMapFragment consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId);

    getParentFragmentManager()
        .beginTransaction()
        .add(R.id.consumer_map_fragment, consumerMapFragment)
        .commit();

    consumerMapFragment.getConsumerGoogleMapAsync(
        new ConsumerMapReadyCallback() {
          @Override
          public void onConsumerMapReady(@NonNull ConsumerGoogleMap consumerGoogleMap) {
            // ...
          }
        });

    return view;
  }
}

Kotlin

class SampleFragment : Fragment() {
  override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.consumer_map_fragment, container, false)

    val optionsWithMapId = GoogleMapOptions().mapId("map-id")
    val consumerMapFragment = ConsumerMapFragment.newInstance(optionsWithMapId)

    parentFragmentManager
      .beginTransaction()
      .add(R.id.consumer_map_fragment, consumerMapFragment)
      .commit()

    consumerMapFragment.getConsumerGoogleMapAsync(
      object : ConsumerMapReadyCallback() {
        override fun onConsumerMapReady(consumerGoogleMap: ConsumerGoogleMap) {
          // ...
        }
      })

    return view
  }
}

Kamerazoom anpassen, um eine Fahrt zu fokussieren

Während einer aktiven Fahrtfreigabesitzung ist es für den Nutzer hilfreich, eine größere Ansicht des Fahrzeugs auf seiner Fahrt zu sehen, anstatt eine Nahaufnahme des Fahrzeugs auf einer Route. Dazu passen Sie die Zoomstufe der Kamera entweder mit dem integrierten AutoCamera an oder passen das Kameraverhalten selbst so an:

  • AutoCamera: Wenn Sie AutoCamera verwenden möchten, müssen Sie nichts weiter tun. Die Kamera folgt standardmäßig der Fahrt.

  • Kameraverhalten anpassen: Wenn Sie das Kameraverhalten anpassen möchten, müssen Sie AutoCamera deaktivieren und dann die gewünschten Anpassungen vornehmen.

AutoCamera zentriert die Kamera standardmäßig

Das Consumer SDK bietet eine AutoCamera-Funktion, die standardmäßig für die integrierte Schaltfläche Mein Standort des Maps SDK aktiviert ist. Die Kamera zoomt heran, um die Route und den nächsten Wegpunkt zu fokussieren.

Wenn Sie AutoCamera verwenden möchten, muss die Funktion aktiviert sein. Weitere Informationen finden Sie unter allowCameraAutoUpdate.

`AutoCamera`

Weitere Informationen zum Button Mein Standort für das Maps SDK finden Sie unter Button „Mein Standort“ in der Maps SDK-Dokumentation für iOS.

Kameraverhalten anpassen

Wenn Sie mehr Kontrolle über das Kameraverhalten haben möchten, können Sie AutoCamera deaktivieren und das Kameraverhalten anpassen.

Deaktivieren oder aktivieren Sie AutoCamera mit dem Attribut AllowCameraAutoUpdate.

Weitere Informationen zu Kameraanpassungen finden Sie in der Maps SDK-Dokumentation für iOS unter Kamera bewegen.

Nächste Schritte

Fahrt unter iOS verfolgen