MapKit + SwiftUI (Parte 6 de 6)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

5

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

6

Explorando lugares con LookAroundPreview

Explorando lugares con LookAroundPreview

LookAroundPreview es una vista de SwiftUI que muestra una imagen real o vista de calle de un lugar geográfico. Es increíblemente fácil de usar, ya que solo necesitas especificar un MKLookAroundScene, que básicamente es una escena que contiene la información necesaria para mostrar imágenes realistas de un lugar. Por ejemplo:

import SwiftUI
// 1
import MapKit
struct ContentView: View {
// 2
@State private var lookAroundScene: MKLookAroundScene?
var body: some View {
// 3
LookAroundPreview(initialScene: lookAroundScene)
}
}
  1. Se importa el framework de MapKit.
  2. Se crea una variable de estado lookAroundScene necesaria para la vista LookAroundPreview.
  3. Se define la vista LookAroundPreview, especificando que la escena inicial a mostrar es lookAroundScene.

Cuando ejecutas el código, es posible que no veas ninguna imagen porque lookAroundScene es nil:

Ejemplo de la vista LookAroundPreview con una escena con valor nil

Para obtener una escena, necesitas las coordenadas del lugar que deseas mostrar y solicitar la escena utilizando MKLookAroundSceneRequest. Para lograr esto, agrega la siguiente función dentro de ContentView:

func requestLookAroundScene() async {
// 1
let location = CLLocationCoordinate2D(latitude: 40.419328, longitude: -3.693096)
// 2
let request = MKLookAroundSceneRequest(coordinate: location)
// 3
lookAroundScene = try? await request.scene
}
  1. Se define las coordenadas del lugar a mostrar.
  2. Se define la solicitud de la escena a solicitar.
  3. Se solicita la escena y se le asigna a a la variable lookAroundScene.

Una vez hecho esto, modifica el contenido del body de ContentView de la siguiente manera:

LookAroundPreview(initialScene: lookAroundScene)
.task {
await requestLookAroundScene()
}

Se añade el modificador task para solicitar y asignar la escena cuando la vista aparezca. Al ejecutar el código, verás la imagen del lugar:

Ejemplo de la vista LookAroundPreview con una escena

Como se muestra en el GIF, al presionar en la imagen o el icono de "Look Around" ubicado en la parte superior derecha se abre una vista donde podrás interactuar con la escena, como desplazarte, ver los nombres de los puntos de interés, manipular la brújula, entre otros.

LookAroundPreview, además del parámetro initialScene, posee los siguientes parámetros que te permiten personalizar la vista según tus preferencias:

  • allowsNavigation: un booleano que indica si se permite la navegación.
  • showsRoadLabels: un booleano que indica si se muestran los nombres de las calles o caminos.
  • pointsOfInterest: define los puntos de interés a mostrar.
  • badgePosition: indica la posición del icono "Look Around".

Por último, puedes utilizar el modificador .lookAroundViewer en una vista para mostrar la escena de un lugar en casos donde quieras mostrar el visualizador directamente luego de una acción:

import SwiftUI
// 1
import MapKit
struct ContentView2: View {
// 2
@State private var lookAroundScene: MKLookAroundScene?
// 3
@State private var isLookingAround: Bool = false
var body: some View {
// 4
Button("Press me") {
isLookingAround = true
}
// 5
.lookAroundViewer(isPresented: $isLookingAround, initialScene: lookAroundScene)
.task {
await requestLookAroundScene()
}
}
func requestLookAroundScene() async {
let location = CLLocationCoordinate2D(latitude: 40.419328, longitude: -3.693096)
let request = MKLookAroundSceneRequest(coordinate: location)
lookAroundScene = try? await request.scene
}
}
  1. Se importa el framework de MapKit.
  2. Se crea una variable de estado lookAroundScene necesaria para el modificador lookAroundViewer.
  3. Se define la variable de estado isLookingAround para indicar cuando se muestra la escena.
  4. Un botón que al ser presionado modifica el valor de isLookingAround a true.
  5. Se agrega el modificador lookAroundViewer al botón, especificando que isLookingAround determina cuándo se presentará y lookAroundScene como escena inicial.
Ejemplo de un botón con el modificador lookAroundViewer

El modificador lookAroundViewer también acepta los mismos parámetros de personalización que la vista LookAroundPreview mencionados anteriormente.

MapKit + SwiftUI (Parte 6 de 6)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

5

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

6

Explorando lugares con LookAroundPreview

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