Componente básico de Place Autocomplete

El componente Basic Place Autocomplete del kit de IU de Places te permite agregar un componente de IU individual que devuelve un ID de lugar cuando un usuario selecciona un lugar. El componente es una cobertura de pantalla completa que proporciona una barra de búsqueda para que los usuarios ingresen una consulta. A medida que el usuario escribe, aparecerá una lista de resultados de autocompletado debajo de la barra de búsqueda. Cuando el usuario presiona un lugar, se devuelve al desarrollador un objeto de lugar que solo contiene el ID del lugar. Este componente se puede personalizar.

El componente toma límites geográficos y otros parámetros de búsqueda a través de la estructura AutocompleteFilter.

La respuesta proporciona una estructura Place con solo el campo placeID completado.

El componente Basic Place Autocomplete tiene las siguientes opciones de personalización: densidad de la lista y si se deben incluir íconos de ubicación. Usa la estructura AutocompleteUICustomization para personalizar el componente.

Puedes usar el componente Basic Place Autocomplete de forma independiente o en conjunto con otras APIs y servicios de Google Maps Platform.

Facturación

Se te factura cada vez que se abre el componente y se realiza una búsqueda. No se te volverá a facturar por esa sesión, a menos que venza o se seleccione un lugar de la lista.

Agrega el componente Basic Autocomplete a tu app

Configura los parámetros del filtro de autocompletado (por ejemplo, los tipos que se devolverán, el país al que se limitarán los resultados, las coordenadas de la región para los resultados y la información de distancia si se establece el origen del usuario) como lo harías para usar Place Autocomplete (nuevo) sin el kit de IU de Places. Consulta la documentación de Place Autocomplete (nuevo) para obtener instrucciones completas y un ejemplo del código para crear un filtro de autocompletado.

Una vez que hayas creado tu filtro de autocompletado, puedes crear una estructura con tus personalizaciones de la IU. Consulta las opciones y las instrucciones de personalización.

Luego, crea un botón que inicie tu componente de Autocompletar básico personalizado.

Swift

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

Consulta el ejemplo completo.

Personaliza el componente Autocompletar básico

Densidad de la lista

Puedes elegir mostrar una lista de dos líneas o una lista de varias líneas. Usa las opciones en AutocompleteListDensity (.twoLine o .multiLine) en la clase AutocompleteUICustomization. Si no especificas la densidad de la lista, el componente mostrará una lista de dos líneas.

Ícono de ubicación

Puedes elegir si quieres mostrar un ícono de lugar predeterminado en la lista de resultados. Usa las opciones en AutocompleteUIIcon (.defaultIcon o .noIcon) en la clase AutocompleteUICustomization.

Agrega personalizaciones al componente Basic Autocomplete

Usa la clase AutocompleteUICustomization para personalizar el componente Autocompletar básico.

Swift

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
)

Ejemplo

Importante: Establece el valor inicial de showWidget como falso para que aparezca tu componente personalizado cuando el usuario haga clic en el botón.

En este ejemplo, se crea un componente de autocompletado básico personalizado con un botón. Se seleccionaron el ícono predeterminado y la densidad de la lista de dos líneas. El filtro de autocompletar está configurado para encontrar lugares relacionados con la contabilidad en Las Vegas y sus alrededores.

Swift

  // Note: You must provide an API key in your app entry point first.
  // A demo view of the basic place autocomplete widget.
  public struct BasicPlaceAutocompleteView: View {
    @State private var fetchedPlace: Place?
    @State private var placesError: PlacesError?
    @State private var showWidget = false
    public var body: some View {
      let types: Set<PlaceType> = [.accounting]
      let countries: Set<String> = ["US"]
      let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)
      let coordinateRegion = RectangularCoordinateRegion(
        northEast: CLLocationCoordinate2D(
          latitude: 36.25290087640495, longitude: -115.08025549571225),
        southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)
      )
      let regionCode = "US"
      let inputOffset = 10
      let filter = AutocompleteFilter(
        types: types,
        countries: countries,
        origin: origin,
        coordinateRegionBias: coordinateRegion,
        regionCode: regionCode)
      let uiCustomization = AutocompleteUICustomization(
        listDensity: .multiLine,
        listItemIcon: .noIcon)
      VStack {
        Button("Search for a place") {
          showWidget.toggle()
        }
        .basicPlaceAutocomplete(
          filter: filter,
          uiCustomization: uiCustomization ?? AutocompleteUICustomization(),
          show: $showWidget,
          onSelection: { place in
            guard let placeID = place.placeID else {
              self.placesError = .internal(
                "Could not fetch place details because place ID from selected suggestion not found."
              )
              return
            }
            Task {
              let placesClient = await PlacesClient.shared
              let fetchPlaceRequest = FetchPlaceRequest(
                placeID: placeID,
                placeProperties: [.displayName, .formattedAddress]
              )
              switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
              case .success(let place):
                print("Fetched place: \(place)")
                self.fetchedPlace = place
              case .failure(let placesError):
                print("Failed to fetch place: \(placesError)")
                self.placesError = placesError
              }
            }
          },
          onError: { placesError in
            self.placesError = placesError
          }
        )
        if let placesError = $placesError.wrappedValue {
          Text(placesError.localizedDescription)
            .frame(maxWidth: .infinity, alignment: .leading)
        } else if let fetchedPlace = $fetchedPlace.wrappedValue {
          Text("\(fetchedPlace)")
            .frame(maxWidth: .infinity, alignment: .leading)
        }
      }
    }
  }