Karte gestalten

Plattform auswählen: Android iOS JavaScript

In diesem Leitfaden wird beschrieben, wie Sie die Karte anpassen können, die in Ihrer Android-App angezeigt wird, wenn Sie einer Fahrt folgen. Sie können das Design der Karte so anpassen:

Funktionen zum cloudbasierten Gestalten von Karteninhalten verwenden

Sie können das Design der Kartenkomponente mithilfe des cloudbasierten Gestaltens von Karteninhalten anpassen. In der Google Cloud Console können Sie Kartenstile 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.

Sowohl die Klasse ConsumerMapView als auch die Klasse ConsumerMapFragment unterstützen cloudbasiertes Gestalten von Karteninhalten. Damit Sie das cloudbasierte Gestalten von Karteninhalten verwenden können, muss LATEST als Renderer ausgewählt sein. In den folgenden Abschnitten wird anhand von Beispielen gezeigt, wie Sie cloudbasiertes Gestalten von Karteninhalten für Ihr Projekt nutzen können.

ConsumerMapView

Wenn du in der ConsumerMapView cloudbasierte Kartenstile verwenden möchtest, setze das Feld mapId auf GoogleMapOptions und übergebe die 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, cloudbasierte Kartenstile in ConsumerMapFragments zu verwenden:

  • Statisch mit der XML-Datei.
  • Dynamisch mit newInstance

Statisch mit XML

Wenn Sie cloudbasiertes Gestalten von Karteninhalten mit der XML-Datei in ConsumerMapFragment 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 auf 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 den Fokus auf eine Fahrt zu legen

Während einer aktiven Fahrtenfreigabe können Sie den Kamerazoom und den Fokus auf zwei Arten steuern:

  • AutoCamera: Wenn Sie AutoCamera verwenden möchten, müssen Sie nichts tun. Die Kamera folgt der Fahrt. Weitere Informationen finden Sie unter AutoCamera.

  • Kameraverhalten anpassen: Wenn Sie das Kameraverhalten anpassen möchten, müssen Sie AutoCamera deaktivieren und dann die Anpassungen vornehmen. Weitere Informationen finden Sie unter Kameraverhalten anpassen.

AutoCamera zentriert die Kamera

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 heran, um den Fahrtweg und den nächsten Wegpunkt der Fahrt zu fokussieren.

Wenn Sie AutoCamera verwenden möchten, müssen Sie es aktivieren. Weitere Informationen finden Sie unter isAutoCameraEnabled.

„AutoCamera“

Weitere Informationen zur Schaltfläche Mein Standort finden Sie in der Dokumentation zur Maps JavaScript API unter Schaltfläche „Mein Standort“.

Kameraverhalten anpassen

Wenn Sie das Kameraverhalten genauer steuern möchten, deaktivieren Sie AutoCamera und passen Sie das Kameraverhalten manuell an.

  1. Deaktivieren Sie AutoCamera mit ConsumerController.setAutoCameraEnabled().

  2. Rufen Sie die empfohlenen Kameragrenzen mit ConsumerController.getCameraUpdate() ab.

  3. Geben Sie CameraUpdate als Argument für eine der folgenden Android-Funktionen an:

Nächste Schritte

Reisen auf Android folgen