Swift Academy · Lección

Mostrar mapas en SwiftUI

Muestre mapas y anotaciones con Map.

Lección 3 de 413 pasos

Mostrar mapas en SwiftUI es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.

La vista Map de SwiftUI

SwiftUI proporciona una vista nativa Map (de MapKit) para mostrar mapas interactivos sin UIKit. Importe MapKit y coloque un Map en la jerarquía de vistas. Desde iOS 17, utiliza una API declarativa moderna.

import SwiftUI
import MapKit

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

Regiones de coordenadas

Una región se describe mediante un MKCoordinateRegion: una coordenada central y una extensión (cuánta latitud y longitud se muestra). Las extensiones menores acercan más la vista.

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

Controlar la cámara mediante la posición

El Map moderno recibe un enlace a MapCameraPosition. Puede comenzar en una región, un rectángulo o encuadrar el contenido automáticamente. Use .region(...) para establecer un área explícita.

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

Añadir un marcador

Marker coloca una chincheta estándar con globo en una coordenada y un título. Coloque los marcadores dentro del cierre final de Map (un generador de contenido del mapa).

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

Personalizar marcadores

Los marcadores aceptan un systemImage y un tinte para representar categorías. Esto hace que se distingan visualmente en el mapa.

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

Anotaciones con vistas personalizadas

Cuando una chincheta no es suficiente, Annotation permite representar cualquier vista de SwiftUI en una coordenada. Proporcione un título y un cierre de contenido.

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

Mostrar varios marcadores a partir de datos

Recorra el modelo con ForEach dentro del generador de contenido del mapa para representar muchos marcadores. Cada elemento proporciona una coordenada.

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

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

Mostrar la ubicación del usuario

Añada UserAnnotation() al contenido del mapa para mostrar el conocido punto azul. Es necesario haber concedido la autorización de ubicación. Puede combinarlo con sus propios marcadores.

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

Controles del mapa

Añada controles estándar con el modificador .mapControls: una brújula, un botón de ubicación del usuario y una vista de escala. Aparecen automáticamente y respetan el estilo del mapa.

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

Estilo del mapa

Use el modificador .mapStyle para cambiar entre representaciones estándar, de imágenes (satélite) e híbridas. También puede activar la elevación realista y los puntos de interés.

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

Reaccionar a cambios de cámara

El modificador .onMapCameraChange informa de cuándo cambia la región visible (por ejemplo, después de que el usuario desplace el mapa). Úselo para obtener datos del área que acaba de hacerse visible.

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

Comprobación rápida: mapas de SwiftUI

Compruebe sus conocimientos de MapKit en SwiftUI.

Responde en la lección interactiva

Resumen: mostrar mapas en SwiftUI

Ahora puede crear mapas interactivos:

Use el Map moderno con un enlace a MapCameraPosition.
Añada elementos Marker o represente vistas personalizadas de Annotation recorriendo los datos con ForEach.
Muestre el punto azul con UserAnnotation() y añada .mapControls.
Aplique estilo al mapa y responda a los cambios de cámara con .onMapCameraChange.

Gratis para empezar

Aprende Swift con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 122
Lecciones: 409

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Mostrar mapas en SwiftUI» es gratis?

Sí — el texto completo de «Mostrar mapas en SwiftUI» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Mostrar mapas en SwiftUI»?

Muestre mapas y anotaciones con Map. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Swift Academy?

No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Mostrar mapas en SwiftUI»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Swift Academy?

Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Swift Academy