3D‑Karte in Ihre App einbinden

Plattform auswählen: Android iOS JavaScript

Einfache Karten von Seattle, San Francisco und Paris

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

  • Ein Google Cloud-Projekt mit aktiviertem Maps 3D SDK for iOS
  • Einen API-Schlüssel für das Maps 3D SDK für iOS
  • Xcode-Version 16.0 oder höher mit dem Maps 3D SDK for iOS-Paket.

Weitere Informationen zu diesen Voraussetzungen finden Sie unter Einrichtung.

Codelab für Fortgeschrittene

Weitere Codebeispiele auf GitHub

Teil 1: Einfache SwiftUI-App erstellen

  1. Erstellen Sie eine neue App in Xcode.
  2. Legen Sie als Produktnamen Hello3DWorld fest, wobei die Organisations-ID auf com.example gesetzt ist. Der Paketname sollte com.example.Hello3DWorld lauten.
  3. Wählen Sie die SwiftUI-Schnittstelle aus.
  4. Fügen Sie die Maps 3D-Bibliothek zu Ihrer App hinzu. Eine Anleitung finden Sie im Abschnitt „Einrichtung“.

Teil 2: Karte hinzufügen

Minimalistische 3D-Karte eines Globus

  1. Öffnen Sie die Datei ContentView.swift. Dies ist der Einstiegspunkt und die Hauptnavigation für Ihre App.

  2. Importieren Sie SwiftUI und das GoogleMaps3D-Paket.

  3. Ersetzen Sie den gesamten Code in der Body-Deklaration durch Map(mode: .hybrid).

    Die minimale Erstkonfiguration, die Sie zum Initialisieren eines Map angeben müssen, ist die MapMode:

    • .hybrid,
    • .roadmap oder
    • .satellite

    Ihre ContentView.swift-Datei sollte so aussehen:

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  var body: some View {
    Map(mode: .hybrid)
  }
}

#Preview {
  ContentView()
}

Teil 3: API-Schlüssel festlegen

  1. Der API-Schlüssel muss vor der Initialisierung der Karte festgelegt werden. Legen Sie dazu Map.apiKey im init()-Event-Handler des View fest, der die Karte enthält.

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }

  var body: some View {
    Map(mode: .hybrid)
  }
}

Teil 4: Kamera verwenden, um die Kartenansicht zu steuern

3D-Kartenansichten werden über die Klasse Camera gesteuert. In diesem Schritt erfahren Sie, wie Sie den Standort, die Höhe, die Ausrichtung, die Neigung, die Rollbewegung und die Entfernung angeben, um die Kartenansicht anzupassen.

  1. Ändern Sie den Funktionsaufruf Map() so, dass er ein initialCamera-Attribut enthält. Initialisieren Sie initialCamera, um eine Ansicht von Downtown Manhattan anzuzeigen.

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
      center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
      heading: 52,
      tilt: 68,
      roll: 0.0,
      range: 1039,
      fieldOfView: .degrees(50)
    ), mode: .hybrid)
  }
}

Im Code oben werden Werte für die folgenden Parameter festgelegt:

  • center: Der LatLngAltitude, der den Kamerastandort darstellt
  • heading: Die Ausrichtung der Kamera in Grad von Norden aus.
  • tilt: Der Neigungswinkel in Grad, wobei 0 direkt über dem Kopf und 90 horizontal ist.
  • roll: Der Rollwinkel um die vertikale Ebene der Kamera in Grad.
  • range: Die Entfernung der Kamera in Metern vom Standort (Breiten- und Längengrad)
  • fieldOfView: Der Winkel, der das Sichtfeld der Kamera darstellt

Wenn Sie keinen dieser zusätzlichen Parameter angeben, wird ein Standardwert verwendet.

Wenn in der Kameraansicht mehr 3D-Daten angezeigt werden sollen, legen Sie die Anfangsparameter so fest, dass eine nähere, geneigte Ansicht angezeigt wird.

Teil 5: Vorschau der Anwendung ansehen und Anwendung ausführen

Einfache 3D-Karte von New York City

  1. Xcode-Vorschau hinzufügen

    Vorabversionen sind eine leistungsstarke XCode-Funktion, mit der Sie Ihre App ansehen und mit ihr interagieren können, ohne den Simulator oder ein externes Gerät verwenden zu müssen.

    Wenn Sie eine Vorschau hinzufügen möchten, fügen Sie einen #Preview {}-Codeblock außerhalb Ihres Structs hinzu.

    #Preview {
  ContentView()
}

  2. Anwendung ausführen

Erstellen Sie die App und führen Sie sie aus.

Lade- und Fehlerstatus der Karte

Das Maps 3D SDK for iOS zeigt automatisch integriertes visuelles Feedback an, während der Status des Map verwaltet wird:

  • Lade-Overlay:Wenn die Kartenansicht zum ersten Mal initialisiert oder geladen wird, wird eine zentrierte Fortschrittsanzeige eingeblendet.
  • Fehler-Overlay:Ein Fehler-Overlay wird angezeigt, wenn die Karte nicht geladen werden kann.

Wenn Sie einen cloudbasierten Kartenstil mit style(mapID:error:) auf Map anwenden, können Sie einen error-Closure übergeben, um Fehler beim Laden des Stils zu verarbeiten.

Auf Tippereignisse auf der Karte warten

Wenn Sie auf Tipp-Ereignisse auf der Karte warten möchten, wenden Sie den Modifikator onTap(_:) auf Map an. Wenn ein Nutzer auf die Karte tippt, empfängt die Closure einen MapTapInfo-Wert, der die location (LatLngAltitude) und den angetippten content (MapTapInfo.Content.map oder MapTapInfo.Content.place(id:)) enthält. Weitere Informationen zu Interaktionen mit POIs finden Sie unter Mit POIs interagieren.

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

Glückwunsch!

Sie haben einer App eine 3D-Karte hinzugefügt.

Als Nächstes können Sie sich mit den erweiterten Funktionen des Maps 3D SDK für iOS vertraut machen, z. B. mit Kamerapfad-Animationen, 3D-Markierungen oder Polygonen.