Karte gestalten

In diesem Leitfaden werden verschiedene Möglichkeiten beschrieben, wie Sie die Karte gestalten können, die in Ihrer iOS-App angezeigt wird, wenn Sie einer Fahrt folgen.

Hinweis

Bevor Sie eine Karte gestalten, benötigen Sie eine Consumer-App mit den folgenden Implementierungen:

• Eine Kartenansicht. Weitere Informationen: Initialize the map view.

• Eine Möglichkeit, Ereignisse in der Kartenansicht zu verarbeiten. Weitere Informationen Weitere Informationen

Außerdem müssen Sie die Backend-Dienste eingerichtet haben, die für das Consumer SDK erforderlich sind, und das Consumer SDK eingerichtet haben. Weitere Informationen finden Sie unter Consumer SDK einrichten und Was ist Fleet Engine?.

Kartenanpassungen

Folgende Anpassungen sind verfügbar:

• Karte gestalten: Sie können Kartenfarben, Polylinien und andere Kartenelemente mit cloudbasierten Kartenstilen gestalten. Weitere Informationen unter Style the map.

• Kamerazoom anpassen: Sie können die integrierte Funktion verwenden oder eigene Kameraoptionen festlegen, um sich auf eine Fahrt zu konzentrieren. Weitere Informationen Weitere Informationen.

• Marker und Polylinien anpassen: Sie können Ihrem App-Design benutzerdefinierte Marker und Routen polylinien hinzufügen. Mit diesen Designelementen kann Ihre Consumer-App eine dynamische Vorschau der Fahrzeugroute anzeigen. Weitere Informationen finden Sie unter Marker anpassen und Polylinien anpassen.

  Das SDK bietet diese Optionen über die Eigenschaft consumerMapStyleCoordinator. Diese Eigenschaft ist über die Klasse GMTCMapView verfügbar.

Karte mit cloudbasierten Kartenstilen gestalten

Sie können das Erscheinungsbild der Kartenkomponente mit cloudbasierten Kartenstilen anpassen. Sie können Kartenstile in der Google Cloud Console für alle Ihre Apps erstellen und bearbeiten, in denen Google Maps verwendet wird. Dazu sind keine Änderungen an Ihrem Code erforderlich. Weitere Informationen finden Sie unter Cloudbasierte Kartenstile und wählen Sie Ihre Plattform aus.

Sowohl die ConsumerMapView als auch die ConsumerMapFragment Klassen unterstützen cloudbasierte Kartenstile. Damit Sie cloudbasierte Kartenstile verwenden können, muss der ausgewählte Kartenrenderer LATEST sein. In den folgenden Abschnitten finden Sie Beispiele für die Verwendung von cloudbasierten Kartenstilen in Ihrem Projekt.

ConsumerMapView

Wenn Sie cloudbasierte Kartenstile in der ConsumerMapView verwenden möchten, legen Sie das mapId Feld für GoogleMapOptions fest und übergeben Sie die GoogleMapOptions an getConsumerGoogleMapAsync(ConsumerMapReadyCallback, Fragment, GoogleMapOptions) oder getConsumerGoogleMapAsync(ConsumerMapReadyCallback, FragmentActivity, GoogleMapOptions)

Beispiel

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

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, cloudbasierte Kartenstile in ConsumerMapFragments zu verwenden:

• Statisch mit dem XML-Code.
• Dynamisch mit newInstance.

Statisch mit dem XML-Code

Wenn Sie cloudbasierte Kartenstile mit dem XML-Code in der ConsumerMapFragment verwenden möchten, fügen Sie das map:mapId XML-Attribut 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 cloudbasierte Kartenstile 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:

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

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 sich auf eine Fahrt zu konzentrieren

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

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

• Kamerverhalten anpassen: Wenn Sie das Kamerverhalten 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 für das Maps SDK aktiviert ist. Die Kamera zoomt, um sich auf die Fahrtroute und den nächsten Wegpunkt zu konzentrieren.

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

Weitere Informationen zur Schaltfläche Mein Standort für das Maps SDK finden Sie unter Schaltfläche „Mein Standort“ in der Dokumentation zum Maps SDK for iOS.

Kamerverhalten anpassen

Wenn Sie das Kamerverhalten besser steuern möchten, können Sie AutoCamera deaktivieren und das Kamerverhalten anpassen.

Deaktivieren oder aktivieren Sie AutoCamera mit der AllowCameraAutoUpdate Eigenschaft.

Weitere Informationen zum Anpassen der Kamera finden Sie unter Kamera bewegen in der Dokumentation zum Maps SDK for iOS.

Nächste Schritte

Einer Fahrt in iOS folgen