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 gezeigt, wie Sie einer iOS-App mit dem Maps 3D SDK for iOS eine einfache 3D-Karte hinzufügen. Bei den Anweisungen 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 mit aktiviertem Maps 3D SDK für iOS
• API-Schlüssel für Maps 3D SDK for iOS
• Xcode Version 16.0 oder höher mit dem hinzugefügten Paket „Maps 3D SDK for iOS“.

Weitere Informationen zu diesen Voraussetzungen finden Sie unter Einrichtung.

Ein erweitertes Codelab

Weitere Codebeispiele auf GitHub

Teil 1: Einfache SwiftUI-App erstellen

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

Teil 2: Karte hinzufügen

1. Öffnen Sie die Datei ContentView.swift. Dies ist der Einstiegspunkt und die Hauptnavigation Ihrer App.

2. Importieren Sie SwiftUI und das GoogleMaps3D-Paket.

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

   Die Mindestkonfiguration, 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 vor der Initialisierung der Karte festgelegt werden. Legen Sie dazu Map.apiKey im init()-Ereignishandler der View fest, die die Karte enthält.

   Warnung :Den API-Schlüssel nicht in einer externen oder öffentlichen Versionskontrolle 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 Standort, die Höhe, den Kurs, die Neigung, die Rollung und den Bereich angeben, um die Kartenansicht anzupassen.

1. Fügen Sie dem Map()-Funktionsaufruf eine initialCamera-Eigenschaft hinzu. Initialisieren Sie initialCamera, um eine Ansicht des Stadtzentrums von Manhattan zu sehen.

   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, für jedes Feld die richtigen Werte anzugeben, insbesondere wenn Sie sie aus einer anderen Quelle einfügen. Andernfalls zeigt die Kamera möglicherweise einen unerwarteten Standort an.

   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 Code oben werden Werte für die folgenden Parameter festgelegt:

• heading: Die Richtung in Grad von Norden aus, in die die Kamera zeigen soll.
• tilt: Der Neigungswinkel in Grad. 0 Grad entspricht dem Zenit und 90 Grad der Horizontale.
• roll: Rollwinkel um die vertikale Ebene der Kamera, in Grad.
• range: Die Entfernung der Kamera in Metern vom Breiten- und Längengrad
• 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 der Boden weit über dem Meeresspiegel befindet, kann es zu ungewöhnlichen visuellen Effekten kommen, wenn Sie eine Höhe festlegen, die unter dem Boden liegt.

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

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 6: App in der Vorschau ansehen und ausführen

1. Xcode-Vorschau hinzufügen

   Vorschaubilder sind eine leistungsstarke XCode-Funktion, mit der Sie Ihre App sehen und damit 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 ein.

   #Preview {
     CameraDemo()
   }
   

2. Anwendung ausführen

Erstellen und ausführen Sie die App.

Glückwunsch!

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

Als Nächstes können Sie sich mit erweiterten Funktionen des Maps 3D SDK for iOS vertraut machen, z. B. mit Kamerapfadanimationen, 3D-Markierungen oder Polygonen.