Aggiungere una mappa 3D all'app

Seleziona la piattaforma: Android iOS JavaScript

Questo prodotto o questa 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 dai Termini specifici di servizio di Google Maps Platform. Per saperne di più, consulta le descrizioni della fase di lancio.

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 il pacchetto Maps 3D SDK per iOS aggiunto.

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.

   Avviso: non archiviare la 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: 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 alla funzione Map() in modo che includa una proprietà initialCamera. Inizializza initialCamera per mostrare una vista del centro di Manhattan.

   Nota: l'ordine dei parametri è importante. La videocamera viene inizializzata fornendo prima la latitudine, 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(
         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.

Nota: l'altitudine della videocamera è un valore assoluto. Nelle aree in cui il livello del suolo è molto al di sopra del livello del mare, impostare un'altitudine inferiore al livello del suolo può causare strani effetti visivi.

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

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.