Aggiungere una mappa 3D all'app

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. Per le istruzioni, consulta la 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, la direzione, l'inclinazione, la rotazione 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 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)
       ), 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 rotazione 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

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 la visualizzazione della videocamera mostri più dati 3D, imposta i parametri iniziali in modo da mostrare una visualizzazione più ravvicinata e inclinata.

Parte 5: 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 {
     ContentView()
   }
   

2. Esegui l'app

Crea ed esegui l'app.

Stati di caricamento ed errore della mappa

Maps SDK 3D per iOS mostra automaticamente un feedback visivo integrato durante la gestione dello stato di Map:

• Overlay di caricamento: viene visualizzato un indicatore di avanzamento centrato quando la visualizzazione della mappa viene inizializzata o caricata per la prima volta.
• Overlay di errore: viene visualizzato un overlay di errore se la mappa non viene caricata.

Se applichi uno stile di mappa basato su cloud utilizzando style(mapID:error:) su Map, puoi passare una chiusura error per gestire gli errori di caricamento dello stile.

Ascolta gli eventi di tocco della mappa

Per ascoltare gli eventi di tocco sulla mappa, applica il onTap(_:) modificatore a Map. Quando un utente tocca la mappa, la chiusura riceve un MapTapInfo valore che fornisce la location (LatLngAltitude) e il content toccato (MapTapInfo.Content.map o MapTapInfo.Content.place(id:)). Per ulteriori informazioni sulle interazioni con i punti di interesse, consulta Interagisci con i punti di interesse.

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

Complimenti!

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

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