Swift Academy · Lezione

Visualizzazione delle mappe in SwiftUI

Mostri mappe e annotazioni con Map.

Lezione 3 di 413 passaggi

Visualizzazione delle mappe in SwiftUI è una lezione Swift Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Swift Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Swift Academy include 4 lezioni in totale.

La vista Map di SwiftUI

SwiftUI offre una vista nativa Map (in MapKit) per visualizzare mappe interattive senza UIKit. Importi MapKit e inserisca una Map nella gerarchia delle viste. A partire da iOS 17 usa un'API moderna e dichiarativa.

import SwiftUI
import MapKit

struct BasicMap: View {
    var body: some View {
        Map()
    }
}

Regioni di coordinate

Una regione è descritta da un MKCoordinateRegion: una coordinata centrale più un'estensione, cioè la quantità di latitudine e longitudine visibile. Estensioni più piccole mostrano l'area a un livello di zoom maggiore.

let region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 41.008, longitude: 28.978),
    span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
)

Controllo della fotocamera con Position

La versione moderna di Map richiede un binding a MapCameraPosition. Può iniziare da una regione, da un rettangolo o inquadrare automaticamente il contenuto. Usi .region(...) per impostare un'area esplicita.

struct CityMap: View {
    @State private var position: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: .init(latitude: 41.008, longitude: 28.978),
            span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1)
        )
    )
    var body: some View {
        Map(position: $position)
    }
}

Aggiunta di un marker

Marker inserisce un pin standard a forma di fumetto in una coordinata, con un titolo. Inserisca i marker nella trailing closure di Map, ovvero nel map content builder.

Map {
    Marker("Hagia Sophia",
           coordinate: .init(latitude: 41.0086, longitude: 28.9802))
}

Personalizzazione dei marker

I marker accettano un systemImage e una tinta per rappresentare le categorie. In questo modo risultano visivamente distinti sulla mappa.

Map {
    Marker("Cafe", systemImage: "cup.and.saucer.fill",
           coordinate: cafeCoord)
        .tint(.brown)
}

Annotazioni con viste personalizzate

Quando un pin non basta, Annotation permette di visualizzare qualsiasi vista SwiftUI in una coordinata. Fornisca un titolo e una closure per il contenuto.

Map {
    Annotation("Office", coordinate: officeCoord) {
        Image(systemName: "building.2.fill")
            .padding(6)
            .background(.blue, in: Circle())
            .foregroundStyle(.white)
    }
}

Visualizzazione di più pin dai dati

Scorra il modello con ForEach all'interno del map content builder per visualizzare molti marker. Ogni elemento fornisce una coordinata.

struct Place: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

Map {
    ForEach(places) { place in
        Marker(place.name, coordinate: place.coordinate)
    }
}

Visualizzazione della posizione dell'utente

Aggiunga UserAnnotation() al contenuto della mappa per mostrare il consueto punto blu. È necessario che l'autorizzazione alla posizione sia stata concessa. Può combinarlo con i propri marker.

Map {
    UserAnnotation()
    ForEach(places) { p in
        Marker(p.name, coordinate: p.coordinate)
    }
}

Controlli della mappa

Colleghi i controlli standard con il modifier .mapControls: una bussola, un pulsante della posizione dell'utente e una vista della scala. Vengono visualizzati automaticamente e rispettano lo stile della mappa.

Map { UserAnnotation() }
    .mapControls {
        MapUserLocationButton()
        MapCompass()
        MapScaleView()
    }

Stile della mappa

Usi il modifier .mapStyle per alternare tra le visualizzazioni standard, con immagini satellitari e ibride. Può anche attivare o disattivare l'altitudine realistica e i punti di interesse.

Map()
    .mapStyle(.hybrid(elevation: .realistic))

Reazione ai cambiamenti della fotocamera

Il modifier .onMapCameraChange segnala quando cambia la regione visibile, ad esempio dopo che l'utente trascina la mappa. Lo usi per recuperare i dati relativi alla nuova area visibile.

Map(position: $position)
    .onMapCameraChange { context in
        let center = context.region.center
        print("Now centered at:", center.latitude, center.longitude)
    }

Verifica rapida: mappe SwiftUI

Verifichi le Sue conoscenze di MapKit in SwiftUI.

Rispondi nella lezione interattiva

Riepilogo: visualizzazione delle mappe in SwiftUI

Ora è in grado di creare mappe interattive:

Usi la moderna Map con un binding a MapCameraPosition.
Inserisca più Marker oppure visualizzi viste personalizzate di Annotation, scorrendo i dati con ForEach.
Mostri il punto blu con UserAnnotation() e aggiunga .mapControls.
Applichi uno stile alla mappa e reagisca ai cambiamenti della fotocamera con .onMapCameraChange.

Gratis per iniziare

Impara Swift con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 122
Lezioni: 409

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Visualizzazione delle mappe in SwiftUI» è gratuita?

Sì — il testo completo di «Visualizzazione delle mappe in SwiftUI» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Swift Academy, passa a CoddyKit PRO. Il corso Swift Academy include 4 lezioni in totale.

Cosa imparerò in «Visualizzazione delle mappe in SwiftUI»?

Mostri mappe e annotazioni con Map. Eserciti Swift Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Swift Academy?

Non è richiesta alcuna esperienza precedente. Swift Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Visualizzazione delle mappe in SwiftUI»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Swift Academy?

Sì. Ogni lezione Swift Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Richiesta dell’autorizzazione alla posizione
Ottenere la posizione dell’utente
Visualizzazione delle mappe in SwiftUI
Geocoding e regioni

← Torna a Swift Academy