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 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, wobei 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 eine neue App in Xcode.
  2. Legen Sie Product Name auf Hello3DWorld und den Organisationsbezeichner 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 zur Einrichtung.

Teil 2: Karte hinzufügen

Minimale 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 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
    • .roadmap 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()-Event-Handler 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 den Standort, die Höhe, die Ausrichtung, die Neigung, die Drehung und die 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(
      center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
      heading: 52,
      tilt: 68,
      roll: 0.0,
      range: 1039,
      fieldOfView: .degrees(50),
      altitudeMode: .relativeToGround
    ), mode: .hybrid)
  }
}

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

  • center: Der LatLngAltitude, der den Kamerastandort darstellt
  • 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 Drehwinkel um die vertikale Ebene der Kamera in Grad
  • range: Die Entfernung der Kamera vom Standort mit Breitengrad und Längengrad in Metern
  • fieldOfView: Der Winkel, der das Sichtfeld der Kamera darstellt
  • altitudeMode: Die Berechnung der Höhe der Kamera

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

Wenn in der Kamera-Ansicht 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

Einfache 3D-Karte von New York City

  1. Xcode-Vorschau hinzufügen

    Vorschauen sind eine leistungsstarke Xcode-Funktion, mit der Sie Ihre App ansehen und damit 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.