Dodawanie mapy 3D do aplikacji

Wybierz platformę: Android iOS JavaScript

Mapa 3D przedstawiająca Nowy Jork

Na tej stronie znajdziesz przykład dodawania podstawowej mapy 3D do aplikacji na Androida za pomocą pakietu Maps 3D SDK na Androida. Instrukcje na tej stronie zakładają, że masz już za sobą kroki opisane na stronie Konfiguracja i masz:

  • Projekt Google Cloud z włączonym pakietem SDK Map 3D na Androida
  • Klucz interfejsu API skonfigurowany do używania z pakietem Maps 3D SDK na Androida
  • Projekt Android Studio skonfigurowany do używania z pakietem Maps 3D SDK na Androida

Więcej informacji o tych wymaganiach wstępnych znajdziesz w sekcji Konfiguracja.

Część 1. Zaktualizuj plik układu (activity_main.xml), aby dodać komponent Map3DView

Komponent Map3DView to widok, który renderuje mapę 3D w aplikacji. Wykonaj te czynności, aby dodać komponent i skonfigurować stan początkowy mapy, w tym pozycję kamery i powiązane atrybuty:

  1. Otwórz plik układu głównej aktywności, który zwykle znajduje się w tym miejscu:app/src/main/res/layout/activity_main.xml

  2. W głównym elemencie ConstraintLayout (lub w głównym elemencie układu) dodaj map3dprzestrzeń nazw XML:

    xmlns:map3d="http://schemas.android.com/apk/res-auto"

  3. Usuń domyślny element <TextView>, który wyświetla komunikat „Hello World!”.

  4. Dodaj do układu komponent Map3DView. Możesz dostosować pozycję kamery i inne atrybuty:

    <?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>

Część 2. Aktualizacja pliku MainActivity.kt

Poniższe kroki inicjują komponent Map3DView dodany do pliku activity_main.xml w części 1 i zarządzają zdarzeniami cyklu życia komponentu:

  1. Otwórz plik MainActivity.kt, który zwykle znajduje się w lokalizacji app/src/main/java/com/example/yourpackagename/MainActivity.kt.

  2. Dodaj niezbędne importy dla pakietu SDK Map 3D na Androida:

    import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback

  3. Zmodyfikuj klasę MainActivity, aby wdrożyć OnMap3DViewReadyCallback:

    class MainActivity : AppCompatActivity(), OnMap3DViewReadyCallback {

  4. Zadeklaruj zmienne dla Map3DView i GoogleMap3D:

    private lateinit var map3DView: Map3DView
private var googleMap3D: GoogleMap3D? = null

  5. W metodzie onCreate po bloku setContentView(...) i ViewCompat.setOnApplyWindowInsetsListener zainicjuj map3DView, wywołaj jego metodę cyklu życia onCreate i wyślij asynchroniczne żądanie mapy:

    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. Zastąp metodę onMap3DViewReady. To wywołanie zwrotne jest wywoływane, gdy mapa jest gotowa do użycia:

    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. Przekaż zdarzenia cyklu życia z aktywności do Map3DView, dodając do MainActivity te zastąpienia:

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

Część 3. Synchronizowanie Gradle i uruchamianie

Po zaktualizowaniu układu i aktywności aplikacji możesz ją skompilować i uruchomić, aby zobaczyć widok mapy 3D.

  1. Aby zsynchronizować projekt z Gradle, wybierz File > Sync Project with Gradle Files (Plik > Synchronizuj projekt z plikami Gradle).

  2. Aby skompilować i uruchomić aplikację w emulatorze lub na urządzeniu fizycznym, wybierz Uruchom > Uruchom.

Jeśli wszystko jest prawidłowo skonfigurowane, w aplikacji powinna się wyświetlić mapa 3D wyśrodkowana w pobliżu współrzędnych podanych w activity_main.xml.

Dalsze kroki

Po dodaniu do aplikacji podstawowej mapy 3D możesz poznać bardziej zaawansowane funkcje pakietu Maps 3D SDK na Androida, takie jak animacje ścieżki kamery, markery 3D czy wielokąty.