3D‑Karte in Ihre App einbinden

Plattform auswählen: Android iOS JavaScript

Dieses Produkt oder diese Funktion ist experimentell (pre-GA). Pre-GA-Produkte und ‑Funktionen werden eventuell nur eingeschränkt unterstützt. Außerdem sind Änderungen an diesen Produkten und Funktionen möglicherweise nicht mit anderen pre-GA-Versionen kompatibel. Pre-GA-Angebote sind durch die dienstspezifischen Nutzungsbedingungen für die Google Maps Platform abgedeckt. Weitere Informationen finden Sie in den Beschreibungen der Einführungsphasen.

Auf dieser Seite wird anhand eines Beispiels beschrieben, wie Sie einer iOS-App mit dem Maps 3D SDK für iOS eine einfache 3D-Karte hinzufügen. Bei 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, in dem das Maps 3D SDK für iOS aktiviert ist
• Einen API-Schlüssel für das Maps 3D SDK für iOS
• Xcode Version 16.0 oder höher mit dem hinzugefügten Maps 3D SDK for iOS-Paket.

Weitere Informationen zu diesen Voraussetzungen finden Sie unter Einrichtung.

Ein Codelab für Fortgeschrittene durcharbeiten

Weitere Codebeispiele auf GitHub

Teil 1: Einfache SwiftUI-App erstellen

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

Teil 2: Karte hinzufügen

1. Öffnen Sie die Datei mit dem Namen 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 zum Initialisieren eines Map angeben müssen, ist die MapMode:

   • .hybrid 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 festgelegt werden, bevor die Karte initialisiert wird. Setzen Sie dazu Map.apiKey im init()-Ereignishandler des View, der die Karte enthält.

   Warnung :API-Schlüssel nicht in externe oder öffentliche Quellcodeverwaltung einchecken

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

Teil 4: Kartenansicht mit einer Kamera steuern

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

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

   Hinweis :Die Reihenfolge der Parameter ist wichtig. Die Kamera wird initialisiert, indem zuerst der Breitengrad und dann der Längengrad angegeben wird. Achten Sie darauf, dass Sie für jede Option die richtigen Werte angeben, insbesondere wenn Sie sie aus einer anderen Quelle einfügen. Andernfalls wird möglicherweise ein unerwarteter Standort für die Kamera angezeigt.

   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 Richtung 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: Der Abstand der Kamera in Metern vom Breiten- und Längengrad des Standorts
• altitude: Die Höhe der Kamera über dem Meeresspiegel.

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

Hinweis :Die Höhe der Kamera ist ein absoluter Wert. In Gebieten, in denen sich das Bodenniveau deutlich über dem Meeresspiegel befindet, kann es zu seltsamen visuellen Effekten kommen, wenn Sie eine Höhe unter dem Bodenniveau festlegen.

Hinweis :Sie können die relative Höhe der Kamera auch mit Neigung und Reichweite anpassen.

Wenn Sie möchten, dass in der Kameraansicht mehr 3D-Daten angezeigt werden, legen Sie die Anfangsparameter so fest, dass eine näher herangezoomte, geneigte Ansicht zu sehen ist.

Teil 6: App in der Vorschau 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.

   Um eine Vorschau hinzuzufügen, fügen Sie außerhalb Ihrer Struktur einen #Preview {}-Codeblock ein.

   #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 sich mit den erweiterten Funktionen des Maps 3D SDK for iOS vertraut machen, z. B. mit Kamera-Pfad-Animationen, 3D-Markierungen oder Polygonen.