Karte gestalten

Plattform auswählen: Android iOS JavaScript

In dieser Anleitung werden verschiedene Möglichkeiten beschrieben, wie Sie die Karte anpassen können, die in Ihrer Android-App angezeigt wird, wenn Sie einer Fahrt folgen. Sie haben folgende Möglichkeiten, das Erscheinungsbild der Karte anzupassen:

Karte mit cloudbasierten Kartenstilen gestalten

Mit cloudbasierten Kartenstilen können Sie das Erscheinungsbild der Kartenkomponente anpassen. Sie können Kartenstile in der Google Cloud Console für alle Ihre Apps erstellen und bearbeiten, die Google Maps verwenden. Dabei sind keine Änderungen an Ihrem Code erforderlich. Weitere Informationen finden Sie unter Cloudbasierte Kartenstile.

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 Cloudbasiertem Gestalten von Karteninhalten 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 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, cloudbasiertes Gestalten von Karteninhalten in ConsumerMapFragments zu verwenden:

  • Statisch mit XML
  • Dynamisch mit newInstance

Statisch mit XML

Wenn Sie cloudbasierte Kartenstile mit XML 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:

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

Während einer aktiven Sitzung zur Fahrtfreigabe können Sie den Kamerazoom und den Fokus auf zwei Arten verwalten:

  • AutoCamera: Wenn Sie AutoCamera verwenden möchten, müssen Sie nichts weiter 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 gewünschten Anpassungen vornehmen. Weitere Informationen finden Sie unter Kameraverhalten anpassen.

AutoCamera zentriert die Kamera

Das Consumer SDK bietet die Funktion AutoCamera, die standardmäßig für die integrierte Schaltfläche Mein Standort des 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, müssen Sie es aktivieren. Weitere Informationen finden Sie unter isAutoCameraEnabled.

`AutoCamera`

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

Kameraverhalten anpassen

Wenn Sie das Kameraverhalten besser steuern möchten, folgen Sie dieser Anleitung, um AutoCamera zu deaktivieren und das Kameraverhalten manuell anzupassen.

  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

Einer Fahrt in Android folgen