Swift Academy · Leçon

Afficher des cartes dans SwiftUI

Affichez des cartes et des annotations avec Map.

Leçon 3 sur 413 étapes

Afficher des cartes dans SwiftUI est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.

La vue cartographique de SwiftUI

SwiftUI fournit une vue Map native (dans MapKit) pour afficher des cartes interactives sans UIKit. Importez MapKit et placez une vue Map dans la hiérarchie de vos vues. Depuis iOS 17, cette vue utilise une API moderne et déclarative.

import SwiftUI
import MapKit

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

Régions de coordonnées

Une région est décrite par un MKCoordinateRegion : une coordonnée centrale et une étendue, c’est-à-dire la portion de latitude et de longitude visible. Plus l’étendue est petite, plus le zoom est rapproché.

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

Contrôler la caméra avec une position

La vue Map moderne reçoit une liaison vers MapCameraPosition. Vous pouvez commencer par une région, un rectangle ou un cadrage automatique du contenu. Utilisez .region(...) pour définir une zone précise.

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

Ajouter un marqueur

Marker place une épingle standard en forme de bulle à une coordonnée, avec un titre. Placez les marqueurs dans la fermeture finale de Map, qui sert de constructeur de contenu cartographique.

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

Personnaliser les marqueurs

Les marqueurs acceptent une systemImage et une teinte pour représenter des catégories. Ils se distinguent ainsi visuellement sur la carte.

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

Annotations avec des vues personnalisées

Lorsqu’une épingle ne suffit pas, Annotation vous permet d’afficher n’importe quelle vue SwiftUI à une coordonnée. Fournissez un titre et une fermeture de contenu.

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

Afficher plusieurs repères à partir de données

Parcourez votre modèle avec ForEach dans le constructeur de contenu cartographique afin d’afficher de nombreux marqueurs. Chaque élément fournit une coordonnée.

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

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

Afficher la position de l’utilisateur

Ajoutez UserAnnotation() au contenu de la carte pour afficher le point bleu familier. Une autorisation d’accès à la localisation doit avoir été accordée. Vous pouvez le combiner avec vos propres marqueurs.

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

Commandes de carte

Ajoutez des commandes standard avec le modificateur .mapControls : une boussole, un bouton de position de l’utilisateur et une vue d’échelle. Elles apparaissent automatiquement et respectent le style de la carte.

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

Style de carte

Utilisez le modificateur .mapStyle pour choisir entre des rendus standard, d’imagerie (satellite) et hybrides. Vous pouvez également activer un relief réaliste et les points d’intérêt.

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

Réagir aux changements de caméra

Le modificateur .onMapCameraChange indique quand la région visible change, par exemple lorsque l’utilisateur déplace la carte. Utilisez-le pour récupérer les données de la nouvelle zone visible.

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

Vérification rapide : cartes SwiftUI

Vérifiez vos connaissances de MapKit dans SwiftUI.

Réponds-y dans la leçon interactive

Récapitulatif : afficher des cartes dans SwiftUI

Vous pouvez maintenant créer des cartes interactives :

Utilisez la vue Map moderne avec une liaison vers MapCameraPosition.
Ajoutez des Marker ou affichez des vues Annotation personnalisées en parcourant les données avec ForEach.
Affichez le point bleu avec UserAnnotation() et ajoutez .mapControls.
Personnalisez le style de la carte et réagissez aux changements de caméra avec .onMapCameraChange.

Gratuit pour commencer

Apprends Swift avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 122
Leçons: 409

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Afficher des cartes dans SwiftUI » est-elle gratuite ?

Oui — le texte complet de « Afficher des cartes dans SwiftUI » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Afficher des cartes dans SwiftUI » ?

Affichez des cartes et des annotations avec Map. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Swift Academy ?

Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Afficher des cartes dans SwiftUI » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?

Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Swift Academy