3D‑Karte in Ihre App einbinden

Auf dieser Seite wird anhand eines Beispiels beschrieben, wie Sie mit dem Maps 3D SDK for iOS einer iOS-App eine einfache 3D-Karte hinzufügen. Die Anleitung auf dieser Seite setzt voraus, dass Sie die Schritte auf der Einrichtung Seite bereits ausgeführt haben und Folgendes vorhanden ist:

• Ein Google Cloud-Projekt, in dem das Maps 3D SDK for iOS aktiviert ist
• Ein API-Schlüssel für das Maps 3D SDK for iOS
• Xcode Version 16.0 oder höher, in dem das Maps 3D SDK for iOS-Paket hinzugefügt wurde.

Weitere Informationen zu diesen Voraussetzungen finden Sie unter Einrichtung.

Ein anspruchsvolleres Codelab durcharbeiten.

Weitere Codebeispiele auf GitHub ansehen.

Teil 1: Einfache SwiftUI-App erstellen

1. Erstellen Sie in Xcode eine neue App.
2. Legen Sie den Produktnamen auf Hello3DWorld und die Organisations-ID auf com.example fest. Der Paketname sollte com.example.Hello3DWorld sein.
3. Wählen Sie die SwiftUI-Schnittstelle aus.
4. Fügen Sie Ihrer App die Maps 3D-Bibliothek hinzu. Eine Anleitung finden Sie im Abschnitt Einrichtung.

Teil 2: Karte hinzufügen

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

2. Importieren Sie SwiftUI und das Paket GoogleMaps3D.

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

   Die minimale Erstkonfiguration, die Sie für die Initialisierung einer Map angeben müssen, ist der MapMode:

   • .hybrid oder
   • .satellite

   Ihre Datei ContentView.swift 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 festgelegt werden, bevor die Karte initialisiert wird. Legen Sie dazu Map.apiKey im init()-Ereignishandler der View fest, die 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 zur Steuerung der Kartenansicht verwenden

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

1. Ändern Sie den Funktionsaufruf Map(), um eine initialCamera-Property einzufügen. Initialisieren Sie initialCamera, um eine Ansicht der Innenstadt von Manhattan anzuzeigen.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         latitude: 40.748339,
         longitude: -73.985912,
         altitude: 211.1,
         heading: 52,
         tilt: 68,
         range: 1039
       ), mode: .hybrid)
     }
   }
   

Im obigen Code werden Werte für diese Parameter festgelegt:

• heading: Die Ausrichtung in Grad von Norden aus, in die die Kamera ausgerichtet werden soll.
• 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 vom Ort mit dem angegebenen Breitengrad und Längengrad in Metern.
• altitude: Die Höhe der Kamera über dem Meeresspiegel.

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

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

Teil 6: Vorschau der App ansehen und ausführen

1. Xcode-Vorschau hinzufügen

   Vorschauen 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.

   Fügen Sie einen #Preview {}-Codeblock außerhalb Ihrer Struktur hinzu, um eine Vorschau hinzuzufügen.

   #Preview {
     CameraDemo()
   }
   

2. Anwendung ausführen

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

Glückwunsch!

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

Als Nächstes können Sie weitere erweiterte Funktionen des Maps 3D SDK for iOS kennenlernen, z. B. Animationen für Kamerapfade, 3D Marker oder Polygone.