Aggiungere una mappa 3D all'app

Seleziona la piattaforma: Android iOS JavaScript

Mappe di base di Seattle, San Francisco e Parigi

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 della pagina Configurazione e che tu disponga di quanto segue:

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

Per ulteriori informazioni su questi prerequisiti, consulta Configurazione.

Segui un codelab più avanzato.

Scopri 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 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

Mappa 3D minimalista di un globo

  1. Apri il file denominato ContentView.swift. Questo è il punto di accesso 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,
    • .roadmap, oppure
    • .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() 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: utilizza una videocamera per controllare la visualizzazione della mappa

Le visualizzazioni mappa 3D sono controllate dalla classe Camera. In questo passaggio imparerai a specificare la posizione, l'altitudine, la direzione, 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.

    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: l'orientamento in gradi rispetto al nord verso cui puntare la fotocamera.
  • tilt: l'angolo di inclinazione in gradi, dove 0 è direttamente sopra la testa e 90 è la visuale orizzontale.
  • roll: l'angolo di rollio attorno al piano verticale della fotocamera, in gradi.
  • range: la distanza in metri della fotocamera 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.

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

Mappa 3D di base di New York

  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

L'SDK Maps 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 sulla mappa

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

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

Complimenti!

Hai aggiunto una mappa 3D a un'app.

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