MapKit + SwiftUI (Parte 3 de 8)

Explorando MapKit en SwiftUI

Cómo referenciar lugares con Place ID

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

Overlays con MapKit y SwiftUI

Cómo interactuar con MapFeature en SwiftUI

Cómo configurar controles de un mapa con MapKit y SwiftUI

Explorando lugares con LookAroundPreview

Mostrar datos de un lugar con Place Card

SwiftUI

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

Misael Cuevas

31 enero, 20244min de lectura

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

Se define la variable de estado selectedItem.
Se definen tres constantes de tipo CLLocationCoordinate2D para establecer coordenadas en el mapa.
Se agrega la vista Map que utiliza la variable selectedItem para identificar el marcador seleccionado por el usuario.
Se añaden dos Marker y un Annotation al Map, cada uno con un valor de tag de tipo String.
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
  }
}

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.
Se establece la variable de estado selectedItem de tipo MKMapItem.
Se agrega la vista Map que utiliza la variable selectedItem para identificar el marcador seleccionado por el usuario.
Se agrega un Marker al Map por cada MKMapItem en la lista items.
Al seleccionar un Marker, se muestra un texto en la parte inferior del mapa con el nombre del MKMapItem seleccionado.
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 3 de 8)

Explorando MapKit en SwiftUI

Cómo referenciar lugares con Place ID

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

Overlays con MapKit y SwiftUI

Cómo interactuar con MapFeature en SwiftUI

Cómo configurar controles de un mapa con MapKit y SwiftUI

Explorando lugares con LookAroundPreview

Mostrar datos de un lugar con Place Card

Comparte este artículo

Seleccionar marcadores y anotaciones de MapKit en SwiftUI

Cómo detectar si un usuario está grabando la pantalla

Cómo posicionar vistas en espiral usando el protocolo Layout

Cómo detectar capturas de pantalla en SwiftUI