Aggiungere una mappa 3D all'app

Questa pagina illustra un esempio di come aggiungere una mappa 3D di base a un'app per iOS utilizzando l'SDK Maps 3D per iOS. Le istruzioni riportate in questa pagina presuppongono che tu abbia già completato i passaggi nella pagina Configurazione e che tu disponga di quanto segue:

• Un progetto Google Cloud con l'SDK Maps 3D per iOS abilitato
• Una chiave API SDK Maps 3D per iOS
• Xcode versione 16.0 o successive con l'aggiunta del pacchetto SDK Maps 3D per iOS.

Per ulteriori informazioni su questi prerequisiti, vedi Configurazione.

Segui un codelab più avanzato.

Visualizza altri esempi di codice su GitHub.

Parte 1: crea un'app SwiftUI di base

1. Crea una nuova app in Xcode.
2. Imposta Nome prodotto su Hello3DWorld, con l'identificatore dell'organizzazione impostato su com.example. Il nome del pacchetto deve essere com.example.Hello3DWorld.
3. Scegli l'interfaccia SwiftUI.
4. Aggiungi la libreria Maps 3D alla tua app. Consulta le istruzioni nella sezione di configurazione.

Parte 2: aggiungi una mappa

1. Apri il file denominato ContentView.swift. Questo è il punto di ingresso e la navigazione principale della tua app.

2. Importa SwiftUI e il pacchetto GoogleMaps3D.

3. Sostituisci tutto il codice all'interno della dichiarazione del corpo con Map(mode: .hybrid).

   La configurazione iniziale minima che devi fornire per inizializzare un Map è MapMode:

   • .hybrid o
   • .satellite

   Il file ContentView.swift dovrebbe avere il seguente aspetto:

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

Parte 3: imposta la chiave API.

1. La chiave API deve essere impostata prima dell'inizializzazione della mappa. A questo scopo, imposta Map.apiKey nel gestore di eventi init() di View che contiene la mappa.

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

Parte 4: utilizzare una videocamera per controllare la visualizzazione mappa

Le visualizzazioni mappa 3D sono controllate dalla classe Camera. In questo passaggio imparerai a specificare posizione, altitudine, direzione, inclinazione, rollio e raggio per personalizzare la visualizzazione della mappa.

1. Modifica la chiamata di funzione Map() in modo che includa una proprietà initialCamera. Inizializza initialCamera per mostrare una vista del centro di Manhattan.

   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)
     }
   }
   

Il codice riportato sopra imposta i valori per questi parametri:

• heading: la direzione in gradi da nord verso cui puntare la videocamera.
• tilt: l'angolo di inclinazione in gradi, dove 0 è direttamente sopra la testa e 90 è orizzontale.
• roll: l'angolo di rollio attorno al piano verticale della videocamera, espresso in gradi.
• range: La distanza in metri della videocamera dalla posizione di latitudine e longitudine
• altitude: l'altezza della videocamera sopra il livello del mare.

Se non fornisci nessuno di questi parametri aggiuntivi, verrà utilizzato un valore predefinito.

Per fare in modo che la visualizzazione della videocamera mostri più dati 3D, imposta i parametri iniziali in modo da mostrare una visualizzazione più ravvicinata e inclinata.

Parte 6: visualizza l'anteprima ed esegui l'app

1. Aggiungere un'anteprima di Xcode

   Le anteprime sono una potente funzionalità di Xcode che ti consente di visualizzare e interagire con la tua app senza dover utilizzare il simulatore o un dispositivo esterno.

   Per aggiungere un'anteprima, aggiungi un blocco di codice #Preview {} al di fuori della struttura.

   #Preview {
     CameraDemo()
   }
   

2. Esegui l'app

Crea ed esegui l'app.

Complimenti!

Hai aggiunto correttamente una mappa 3D a un'app.

Successivamente, puoi esplorare le funzionalità più avanzate dell'SDK Maps 3D per iOS, come le animazioni del percorso della videocamera, i marcatori 3D o i poligoni.