Swift Academy · Aula

Exibição de Mapas no SwiftUI

Exiba mapas e anotações com Map.

Exibição de Mapas no SwiftUI é uma aula grátis de Swift Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Swift Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Swift Academy inclui 4 aulas no total.

A visualização de mapa do SwiftUI

O SwiftUI fornece uma visualização nativa Map (no MapKit) para exibir mapas interativos sem UIKit. Importe MapKit e coloque um Map na hierarquia de visualizações. Desde o iOS 17, ele usa uma API moderna e declarativa.

import SwiftUI
import MapKit

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

Regiões de coordenadas

Uma região é descrita por um MKCoordinateRegion — uma coordenada central mais uma extensão (a quantidade de latitude e longitude visível). Extensões menores ampliam mais o mapa.

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

Controlando a câmera com a posição

O Map moderno recebe uma associação com MapCameraPosition. Você pode começar em uma região, em um retângulo ou enquadrar o conteúdo automaticamente. Use .region(...) para definir uma á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)
    }
}

Adicionando um marcador

Marker coloca um pino padrão em forma de balão em uma coordenada, com um título. Coloque os marcadores na closure final do Map (um construtor de conteúdo de mapa).

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

Personalizando marcadores

Os marcadores aceitam um systemImage e um tint para representar categorias. Isso faz com que sejam visualmente distintos no mapa.

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

Anotações com visualizações personalizadas

Quando um pino não é suficiente, Annotation permite renderizar qualquer visualização do SwiftUI em uma coordenada. Forneça um título e uma closure de conteúdo.

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

Exibindo vários pinos a partir de dados

Percorra seu modelo com ForEach dentro do construtor de conteúdo do mapa para renderizar vários marcadores. Cada item fornece uma coordenada.

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

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

Exibindo a localização do usuário

Adicione UserAnnotation() ao conteúdo do mapa para mostrar o familiar ponto azul. Para isso, é necessário que a autorização de localização tenha sido concedida. Você pode combiná-lo com seus próprios marcadores.

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

Controles do mapa

Adicione controles padrão com o modificador .mapControls: uma bússola, um botão de localização do usuário e uma visualização de escala. Eles aparecem automaticamente e respeitam o estilo do mapa.

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

Estilo do mapa

Use o modificador .mapStyle para alternar entre representações padrão, de imagens (satélite) e hybrid. Você também pode ativar ou desativar a elevação realista e os pontos de interesse.

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

Reagindo às alterações da câmera

O modificador .onMapCameraChange informa quando a região visível muda (por exemplo, depois que o usuário move o mapa). Use-o para buscar dados da nova área visível.

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

Verificação rápida: mapas do SwiftUI

Teste seus conhecimentos sobre MapKit no SwiftUI.

Recapitulação: exibindo mapas no SwiftUI

Agora você pode criar mapas interativos:

Use o Map moderno com uma associação de MapCameraPosition.
Adicione Markers ou renderize visualizações personalizadas de Annotation, percorrendo os dados com ForEach.
Mostre o ponto azul com UserAnnotation() e adicione .mapControls.
Estilize o mapa e reaja às alterações da câmera com .onMapCameraChange.

Perguntas Frequentes

A aula “Exibição de Mapas no SwiftUI” é grátis?

Sim — o texto completo de “Exibição de Mapas no SwiftUI” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Swift Academy, atualize para CoddyKit PRO. O curso de Swift Academy inclui 4 aulas no total.

O que vou aprender em “Exibição de Mapas no SwiftUI”?

Exiba mapas e anotações com Map. Você pratica Swift Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Swift Academy?

Nenhuma experiência prévia é necessária. Swift Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Exibição de Mapas no SwiftUI”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Swift Academy?

Sim. Cada aula de Swift Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Solicitação de Autorização de Localização
Obtenção da Localização do Usuário
Exibição de Mapas no SwiftUI
Geocodificação e Regiões

← Voltar para Swift Academy