MapKit + SwiftUI (Parte 8 de 8)
1Explorando MapKit en SwiftUI
2Cómo referenciar lugares con Place ID
3Seleccionar marcadores y anotaciones de MapKit en SwiftUI
4Overlays con MapKit y SwiftUI
5Cómo interactuar con MapFeature en SwiftUI
6Cómo configurar controles de un mapa con MapKit y SwiftUI
7Explorando lugares con LookAroundPreview
8Mostrar datos de un lugar con Place Card
Mostrar datos de un lugar con Place Card
Misael Cuevas
20 noviembre, 20246min de lectura
Place Card es un conjunto de vistas que provee MapKit para mostrar al usuario información de un lugar sin que tengas que crear tu propia interfaz personalizada. Algunos de los datos que se pueden mostrar incluyen horarios, teléfono, sitio web, entre otros.
Para usar Place Card en SwiftUI, debes aplicar los modificadores de vista (view modifiers) que se describen a continuación.
Código de demostración
Comienza con el siguiente ejemplo de código para mostrar la información de un lugar:
import SwiftUIimport MapKitstruct MyMapView: View {@State private var mapItem: MKMapItem?@State private var selectedMapItem: MKMapItem?var body: some View {Map(selection: $selectedMapItem) {if let mapItem {Marker(item: mapItem).tag(mapItem)}}.task {try? await requestMapItem(identifier: "IBA929D56735A3139")}}private func requestMapItem(identifier: String) async throws {guard let identifier = MKMapItem.Identifier(rawValue: identifier) else {return}let request = MKMapItemRequest(mapItemIdentifier: identifier)mapItem = try? await request.mapItem}}
Este código crea una vista que muestra un mapa con un marcador obtenido asíncronamente a partir de un Place ID específico. La vista es interactiva, permitiendo la selección del marcador y manejando el estado internamente para gestionar tanto el marcador seleccionado como el solicitado.
Si quieres aprender más sobre Place ID y marcadores en MapKit, te recomiendo leer Cómo referenciar lugares con Place ID y Seleccionar marcadores y anotaciones de MapKit en SwiftUI.
Cómo mostrar Place Card en un mapa
Para mostrar la información del lugar en una vista, usa el modificador mapItemDetailSelectionAccessory
en el marcador. Añádelo debajo del modificador tag
de esta manera:
.mapItemDetailSelectionAccessory()
Como puedes ver, al presionar el marcador en el mapa, se muestra un sheet con los datos del lugar. Además, puedes realizar acciones como llamar, visitar el sitio web, abrir Apple Maps o ver la ruta para llegar al lugar.
Estilos de Place Card
mapItemDetailSelectionAccessory
ofrece varios estilos que puedes aplicar según tu preferencia:
Sheet
Muestra los datos del lugar en un sheet. Este es el estilo mostrado en la imagen anterior. Puedes especificarlo así:
.mapItemDetailSelectionAccessory(.sheet)
Caption
Muestra un botón que, al presionarlo, abre Apple Maps con el lugar seleccionado:
.mapItemDetailSelectionAccessory(.caption)
Callout
Muestra un popover con la información del lugar. Este estilo tiene tres subestilos:
compact
: Visualiza un callout compacto.
.mapItemDetailSelectionAccessory(.callout(.compact))
full
: Muestra un popover más grande con más información.
.mapItemDetailSelectionAccessory(.callout(.full))
automatic
: Esta es la opción predeterminada, dejando que el framework determine el estilo de callout más apropiado. Puedes usarlo de forma implicita.mapItemDetailSelectionAccessory(.callout)
ó explicita.mapItemDetailSelectionAccessory(.callout(.automatic))
.
Automatic
Delega al framework la selección del mejor estilo basado en el espacio disponible. Usa este estilo de forma implicita .mapItemDetailSelectionAccessory()
ó explicita .mapItemDetailSelectionAccessory(.automatic)
.
Mostrar Place Card en un MapFeature
Además de mostrar la información de un lugar, puedes mostrar información de un MapFeature
utilizando el modificador mapFeatureSelectionAccessory
. Añade este modificador al Map
. Modifica el código de ejemplo así:
- Cambia la declaración de la propiedad
selectedMapItem
:
@State private var selectedMapItem: MapSelection<MKMapItem>?
Esto permite la selección de marcadores y features en el mapa.
- Añade el modificador encima de
task
:
.mapFeatureSelectionAccessory()
Tu vista de SwiftUI debe verse así:
import SwiftUIimport MapKitstruct MyMapView: View {@State private var mapItem: MKMapItem?@State private var selectedMapItem: MapSelection<MKMapItem>?var body: some View {Map(selection: $selectedMapItem) {if let mapItem {Marker(item: mapItem).tag(mapItem).mapItemDetailSelectionAccessory()}}.mapFeatureSelectionAccessory().task {try? await requestMapItem(identifier: "IBA929D56735A3139")}}private func requestMapItem(identifier: String) async throws {...}}
Al igual que con mapItemDetailSelectionAccessory
, puedes aplicar los mismos estilos a mapFeatureSelectionAccessory
. Ejemplo:
.mapItemDetailSelectionAccessory(.caption)
Dependiendo del lugar o feature seleccionado, la información mostrada puede variar. Por ejemplo, si muestras un place card de una Apple Store, se mostrará una foto del lugar, pero otros lugares podrían no tener foto debido a que Apple aún no tiene esa información.
Para más información sobre
MapFeature
, consulta Cómo interactuar con MapFeature en SwiftUI.
Mostrar un Placer Card en cualquier vista
Puedes usar los modificadores mapItemDetailSheet
y mapItemDetailPopover
para mostrar la información de un lugar en una sheet o popover. A continuación, se muestra un ejemplo:
import SwiftUIimport MapKitstruct MyPlacesView: View {@State private var mapItem: MKMapItem?var body: some View {Button("Display Place Card") {mapItem = createMapItem(name: "Prado Museum",latitude: 40.4139,longitude: -3.6923)}}private 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 = namereturn mapItem}}
Este código crea una vista en la que un botón genera un MKMapItem
al presionarse, utilizando la función createMapItem
para definir su nombre y coordenadas geográficas.
Sheet
Para mostrar un sheet con la información del lugar al presionar el botón, añade el siguiente modificador al Button
del ejemplo:
.mapItemDetailSheet(item: $mapItem)
Este sheet incluye un pequeño mapa con un marcador en el lugar seleccionado. Al presionar el mapa, se abre Apple Maps con el lugar indicado.
mapItemDetailSheet
tiene otros parámetros que puedes utilizar a tu favor:
isPresented
: Es un binding de tipo boolean para determinar cuando el sheet se está visualizando o no.displaysMap
: Es un boolean para indicar si deseas mostrar el mapa en el sheet o no. Su valor por defecto estrue
.
Popover
Para mostrar un popover, elimina el modificador mapItemDetailSheet
y añade:
.mapItemDetailPopover(item: $mapItem)
Usa un simulador o dispositivo con pantalla grande (ej. iPad) para visualizar el popover, ya que en dispositivos pequeños se muestra como sheet.
mapItemDetailPopover
tiene los parámetros de mapItemDetailSheet
más los siguientes:
attachmentAnchor
: Define el ancla de fijación de un popover.arrowEdge
: Define hacia que lado se debe mostrar la flecha del popover.
En este último apartado solo se muestra el nombre y las coordenadas del lugar porque son los únicos valores que están estableciendo en la función
createMapItem
. Si se establecen otros como el teléfono o sitio web, estos se mostrarán en place card.
Compatibilidad
- iOS 18.0+
- iPadOS 18.0+
- Mac Catalyst 18.0+
- macOS 15.0+
- visionOS 2.0+
MapKit + SwiftUI (Parte 8 de 8)
1Explorando MapKit en SwiftUI
2Cómo referenciar lugares con Place ID
3Seleccionar marcadores y anotaciones de MapKit en SwiftUI
4Overlays con MapKit y SwiftUI
5Cómo interactuar con MapFeature en SwiftUI
6Cómo configurar controles de un mapa con MapKit y SwiftUI
7Explorando lugares con LookAroundPreview
8Mostrar datos de un lugar con Place Card