3D‑Karte in Ihre App einbinden

Plattform auswählen: Android iOS JavaScript

Eine 3D-Karte von New York City

Auf dieser Seite wird anhand eines Beispiels beschrieben, wie Sie mit dem Maps 3D SDK für Android eine einfache 3D-Karte in eine Android-App einfügen. Bei der Anleitung auf dieser Seite wird davon ausgegangen, dass Sie die Schritte auf der Seite Einrichtung bereits ausgeführt haben und Folgendes haben:

  • Ein Google Cloud-Projekt, in dem das Maps 3D SDK für Android aktiviert ist
  • Ein API-Schlüssel, der für die Verwendung mit dem Maps 3D SDK für Android konfiguriert ist
  • Ein Android Studio-Projekt, das für die Verwendung mit dem Maps 3D SDK für Android eingerichtet ist

Weitere Informationen zu diesen Voraussetzungen finden Sie unter Einrichtung.

Teil 1: Layoutdatei (activity_main.xml) aktualisieren, um die Komponente Map3DView hinzuzufügen

Die Map3DView-Komponente ist die Ansicht, in der die 3D-Karte in der App gerendert wird. Mit den folgenden Schritten wird die Komponente hinzugefügt und der Anfangszustand der Karte konfiguriert, einschließlich der Kameraposition und der zugehörigen Attribute:

  1. Öffnen Sie die Layoutdatei Ihrer Hauptaktivität, die sich normalerweise unter app/src/main/res/layout/activity_main.xml befindet.

  2. Fügen Sie im Stamm-ConstraintLayout-Element (oder Ihrem Stamm-Layoutelement) den map3d-XML-Namespace hinzu:

    xmlns:map3d="http://schemas.android.com/apk/res-auto"
    
  3. Löschen Sie die Standard-<TextView>, in der „Hello World!“ angezeigt wird.

  4. Fügen Sie Ihrem Layout die Komponente Map3DView hinzu. Sie können die Kameraposition und andere Attribute anpassen:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:map3d="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/main"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity">
    
      <com.google.android.gms.maps3d.Map3DView
        android:id="@+id/map3dView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        map3d:mode="hybrid"
        map3d:centerLat="38.544012"
        map3d:centerLng="-107.670428"
        map3d:centerAlt="2427.6"
        map3d:heading="310"
        map3d:tilt="63"
        map3d:range="8266"
        map3d:roll="0"
        map3d:minAltitude="0"
        map3d:maxAltitude="1000000"
        map3d:minHeading="0"
        map3d:maxHeading="360"
        map3d:minTilt="0"
        map3d:maxTilt="90"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
    

Teil 2: „MainActivity.kt“ aktualisieren

In den folgenden Schritten wird die Map3DView-Komponente initialisiert, die in Teil 1 der Datei activity_main.xml hinzugefügt wurde, und es werden Komponenten-Lebenszyklusereignisse verwaltet:

  1. Öffnen Sie die Datei MainActivity.kt, die sich normalerweise unter app/src/main/java/com/example/yourpackagename/MainActivity.kt befindet.

  2. Fügen Sie die erforderlichen Importe für das Maps 3D SDK für Android hinzu:

    import com.google.android.gms.maps3d.GoogleMap3D
    import com.google.android.gms.maps3d.Map3DView
    import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
    
  3. Ändern Sie die Klasse MainActivity, um OnMap3DViewReadyCallback zu implementieren:

    class MainActivity : AppCompatActivity(), OnMap3DViewReadyCallback {
    
  4. Deklarieren Sie Variablen für Map3DView und GoogleMap3D:

    private lateinit var map3DView: Map3DView
    private var googleMap3D: GoogleMap3D? = null
    
  5. Initialisieren Sie in der Methode onCreate nach setContentView(...) und dem Block ViewCompat.setOnApplyWindowInsetsListener die map3DView, rufen Sie die Methode onCreate des Lebenszyklus auf und fordern Sie die Karte asynchron an:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
    
        map3DView = findViewById(R.id.map3dView)
        map3DView.onCreate(savedInstanceState)
        map3DView.getMap3DViewAsync(this)
    }
    
  6. Überschreiben Sie die Methode onMap3DViewReady. Dieser Callback wird ausgelöst, sobald die Karte einsatzbereit ist:

    override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
        // Interact with the googleMap3D object here
        this.googleMap3D = googleMap3D
        // You can now make calls to the googleMap3D object, e.g.,
        // googleMap3D.cameraController.flyTo(camera { ... })
    }
    
  7. Leiten Sie Lebenszyklusereignisse aus Ihrer Aktivität an Map3DView weiter, indem Sie der MainActivity die folgenden Überschreibungen hinzufügen:

    override fun onStart() {
        super.onStart()
        map3DView.onStart()
    }
    
    override fun onResume() {
        super.onResume()
        map3DView.onResume()
    }
    
    override fun onPause() {
        map3DView.onPause()
        super.onPause()
    }
    
    override fun onStop() {
        map3DView.onStop()
        super.onStop()
    }
    
    override fun onDestroy() {
        map3DView.onDestroy()
        super.onDestroy()
    }
    
    override fun onSaveInstanceState(outState: Bundle) {
        super.onSaveInstanceState(outState)
        map3DView.onSaveInstanceState(outState)
    }
    
    override fun onLowMemory() {
        super.onLowMemory()
        map3DView.onLowMemory()
    }
    

Teil 3: Gradle synchronisieren und ausführen

Nachdem Sie das Layout und die Aktivität Ihrer App aktualisiert haben, können Sie die App erstellen und ausführen, um die 3D-Kartenansicht zu sehen.

  1. Wenn Sie Ihr Projekt mit Gradle synchronisieren möchten, wählen Sie File > Sync Project with Gradle Files (Datei > Projekt mit Gradle-Dateien synchronisieren) aus.

  2. Wenn Sie Ihre App auf einem Emulator oder einem physischen Gerät erstellen und ausführen möchten, wählen Sie Ausführen > Ausführen aus.

Wenn alles richtig konfiguriert ist, sollte in Ihrer App eine 3D-Karte angezeigt werden, die auf die in Ihrem activity_main.xml angegebenen Koordinaten zentriert ist.

Nächste Schritte

Nachdem Sie Ihrer App eine einfache 3D-Karte hinzugefügt haben, können Sie sich mit den erweiterten Funktionen des Maps 3D SDK for Android vertraut machen, z. B. Kamera-Pfad-Animationen, 3D-Markierungen oder Polygonen.