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 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 mit aktiviertem Maps 3D SDK for iOS
  • Ein API-Schlüssel für das Maps 3D SDK for iOS
  • Xcode Version 16.0 oder höher mit dem hinzugefügten Paket für das Maps 3D SDK for iOS

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-Oberfläche aus.
  4. Fügen Sie Ihrer App die Maps 3D-Bibliothek 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 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 zum Steuern der Kartenansicht verwenden

3D-Kartenansichten werden mit der 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)
    ), mode: .hybrid)
  }
}

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

  • center: Der LatLngAltitude-Wert, 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.

Wenn Sie keine 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 App ansehen und sie 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 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 {
  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 der Mapverwaltet wird:

  • Lade-Overlay:Ein zentrierter Fortschrittsindikator wird angezeigt, wenn die Kartenansicht zum ersten Mal initialisiert oder geladen wird.
  • Fehler-Overlay:Ein Fehler-Overlay wird angezeigt, wenn die Karte nicht geladen werden kann.

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

Auf Karten-Tap-Ereignisse warten

Wenn Sie auf Tap-Ereignisse auf der Karte warten möchten, wenden Sie den onTap(_:) Modifikator auf Map an. Wenn ein Nutzer auf die Karte tippt, empfängt die Closure einen MapTapInfo Wert, der den 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 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 von Kamerapfaden, 3D-Markierungen oder Polygone.