Aggiungere una mappa 3D all'app

Questo prodotto o funzionalità è sperimentale (pre-GA). I prodotti e le funzionalità pre-GA potrebbero avere supporto limitato e le modifiche ai prodotti e alle funzionalità pre-GA potrebbero non essere compatibili con altre versioni pre-GA. Le offerte pre-GA sono coperte da Google Termini specifici di servizio di Google Maps Platform. Per ulteriori informazioni, consulta le descrizioni della fase di lancio.

Seleziona la piattaforma: Android iOS JavaScript

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

• Un progetto Google Cloud con Maps SDK 3D per iOS abilitato
• Una chiave API per Maps SDK 3D per iOS
• Xcode versione 16.0 o successive con il pacchetto Maps SDK 3D per iOS aggiunto.

Per ulteriori informazioni su questi prerequisiti, consulta la sezione 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 il nome del 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 è il MapMode:

   • .hybrid,
   • .roadmap 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. Per farlo, imposta Map.apiKey nel gestore di eventi init() della View che contiene la mappa.

   Avviso: non eseguire il check-in della chiave API nel controllo del codice sorgente esterno o pubblico

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

Parte 4: utilizza una videocamera per controllare la visualizzazione della mappa

Le visualizzazioni delle mappe 3D sono controllate dalla classe Camera. In questo passaggio imparerai a specificare la posizione, l'altitudine, l'orientamento, l'inclinazione, il rollio e l'intervallo per personalizzare la visualizzazione della mappa.

1. Modifica la chiamata di funzione Map() in modo da includere una proprietà initialCamera. Inizializza initialCamera per mostrare una visualizzazione del centro di Manhattan.

   Nota: l'ordine dei parametri è importante. La videocamera viene inizializzata fornendo prima la latitudine e poi la longitudine. Assicurati di specificare i valori corretti per ciascuno, soprattutto quando li incolli da un'altra origine, altrimenti la videocamera potrebbe mostrare una posizione imprevista.

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

Il codice riportato sopra imposta i valori per questi parametri:

• center: LatLngAltitude che rappresenta la posizione della videocamera
• heading: la direzione in gradi da nord verso cui puntare la videocamera.
• tilt: l'angolo di inclinazione in gradi, dove 0 è direttamente sopra e 90 è orizzontale.
• roll: l'angolo di rollio attorno al piano verticale della videocamera, in gradi.
• range: la distanza in metri della videocamera dalla posizione di latitudine e longitudine
• fieldOfView: l'angolo che rappresenta il campo visivo della videocamera
• altitudeMode: come calcolare l'altezza della videocamera.

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

Nota: puoi anche regolare l'altitudine relativa della videocamera utilizzando l'inclinazione e l' intervallo.

Per fare in modo che l'inquadratura 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. Aggiungi 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 {} all'esterno della struttura.

   #Preview {
     CameraDemo()
   }
   

2. Esegui l'app

Crea ed esegui l'app.

Complimenti!

Hai aggiunto una mappa 3D a un'app.

Ora puoi esplorare le funzionalità avanzate di Maps SDK 3D per iOS, come le animazioni del percorso della videocamera, gli indicatori3Do i poligoni.