MapKit + SwiftUI (Parte 2 de 4)1

Explorando MapKit en SwiftUI

2

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

3

Overlays con MapKit y SwiftUI

4

Cómo interactuar con MapFeature en SwiftUI

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

Map cuenta con el parámetro selection para elegir marcadores o anotaciones en un mapa, requiriendo una variable de estado para identificar la selección del usuario.

Por simplicidad de este artículo, el término marcador hace referencia a un Marker ó un Annotation.

Si tus marcadores no comparten la misma identidad, debes asociarlos mediante el modificador tag. Esto permite vincularlos a la variable especificada en el parámetro selection. Ejemplo:

import SwiftUI
import MapKit
struct ContentView: View {
// 1
@State private var selectedItem: String?
// 2
private let location1 = CLLocationCoordinate2D(latitude: 40.413652, longitude: -3.681793)
private let location2 = CLLocationCoordinate2D(latitude: 40.414951, longitude: -3.681856)
private let location3 = CLLocationCoordinate2D(latitude: 40.416257, longitude: -3.680661)
var body: some View {
// 3
Map(selection: $selectedItem) {
// 4
Marker("Marker 1", coordinate: location1)
.tag("Marker 1")
Marker("Marker 2", coordinate: location2)
.tint(.purple)
.tag("Marker 2")
Annotation("Annotation", coordinate: location3) {
Text("👀")
.padding(4)
.background(.yellow)
}
.tag("Marker 3")
}
.overlay(alignment: .bottom) {
// 5
if let selectedItem {
Text("\(selectedItem)")
.foregroundStyle(.white)
.padding(5)
.background(
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.black.opacity(0.7))
)
}
}
}
}
  1. Se define la variable de estado selectedItem.
  2. Se definen tres constantes de tipo CLLocationCoordinate2D para establecer coordenadas en el mapa.
  3. Se agrega la vista Map que utiliza la variable selectedItem para identificar el marcador seleccionado por el usuario.
  4. Se añaden dos Marker y un Annotation al Map, cada uno con un valor de tag de tipo String.
  5. Al seleccionar un marcador, se muestra un texto en la parte inferior del mapa con el valor del tag del Marker/Annotation seleccionado.
Ejemplo de un mapa con dos marcadores y una anotación que muestran una animación al ser seleccionadas

Es importante que tengas en cuenta que el valor asignado al modificador tag debe conformar con el protocolo Hashable.

En el caso de que tus marcadores compartan la misma identidad, no es necesario usar el modificador tag. Por ejemplo:

import SwiftUI
import MapKit
struct ContentView: View {
// 1
@State private var items: [MKMapItem] = [
createMapItem(name: "Retiro Park", latitude: 40.4152, longitude: -3.6840),
createMapItem(name: "Puerta del Sol", latitude: 40.4169, longitude: -3.7038),
createMapItem(name: "Plaza Mayor", latitude: 40.4155, longitude: -3.7072),
createMapItem(name: "Royal Palace", latitude: 40.4172, longitude: -3.7130),
createMapItem(name: "Thyssen-Bornemisza Museum", latitude: 40.4168, longitude: -3.6949),
createMapItem(name: "Prado Museum", latitude: 40.4139, longitude: -3.6923),
createMapItem(name: "Reina Sofia Museum", latitude: 40.4085, longitude: -3.6942),
createMapItem(name: "Templo de Debod", latitude: 40.4240, longitude: -3.7179),
createMapItem(name: "Gran Via", latitude: 40.4214, longitude: -3.7056)
]
// 2
@State private var selectedItem: MKMapItem?
var body: some View {
// 3
Map(selection: $selectedItem) {
// 4
ForEach(items, id: \.self) { item in
Marker(item: item)
}
}
.overlay(alignment: .bottom) {
// 5
if let name = selectedItem?.name {
Text(name)
.foregroundStyle(.white)
.padding(5)
.background(
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.black.opacity(0.7))
)
}
}
}
// 6
private static func createMapItem(name: String, latitude: Double, longitude: Double) -> MKMapItem {
let coordinate = CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
let placemark = MKPlacemark(coordinate: coordinate)
let mapItem = MKMapItem(placemark: placemark)
mapItem.name = name
return mapItem
}
}
  1. Se define un listado de MKMapItem con sus nombres y coordenadas. MKMapItem es una clase de MapKit que se utiliza para definir un punto de interés en el mapa.
  2. Se establece la variable de estado selectedItem de tipo MKMapItem.
  3. Se agrega la vista Map que utiliza la variable selectedItem para identificar el marcador seleccionado por el usuario.
  4. Se agrega un Marker al Map por cada MKMapItem en la lista items.
  5. Al seleccionar un Marker, se muestra un texto en la parte inferior del mapa con el nombre del MKMapItem seleccionado.
  6. La función createMapItem crea un MKMapItem a partir de un nombre, latitud y longitud, utilizada para la creación de cada elemento en el listado items.
Ejemplo de un mapa con varios marcadores que muestran una animación al ser seleccionadas

Recuerda que MapKit no seleccionará marcadores que no sean del mismo tipo que definas en el parámetro selection de la vista Map.

MapKit + SwiftUI (Parte 2 de 4)1

Explorando MapKit en SwiftUI

2

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

3

Overlays con MapKit y SwiftUI

4

Cómo interactuar con MapFeature en SwiftUI

Comparte este artículo

Subscríbete a nuestro Newsletter

Mantente al día en el mundo de las aplicaciones móviles con nuestro blog especializado.

Artículos semanales

Todas las semanas artículos nuevos sobre el mundo de las aplicaciones móviles.

No spam

No te enviaremos spam, solo contenido de calidad. Puedes darte de baja cuando quieras.

Contenido de calidad

Nada de contenido generado de manera automática usando ChatGPT.

Recomendaciones

Tips indispensables sobre mejores prácticas y metodologías.

© 2024 AsyncLearn