Selecciona la plataforma: Android iOS JavaScript

Componente Basic Place Autocomplete

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

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

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

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 AutocompleteUICustomization estructura para personalizar el componente.

Puedes usar el componente Basic Place Autocomplete de forma independiente o junto 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 consulta. 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

Establece los parámetros del filtro de autocompletado (por ejemplo, los tipos que se mostrará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 de los usuarios) como lo harías para usar Place Autocomplete (New) sin el kit de IU de Places. Consulta la documentación de Place Autocomplete (New) 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 e instrucciones de personalización.

Luego, crea un botón que inicie tu componente Basic Autocomplete personalizado.

Swift

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

Consulta el ejemplo completo.

Personaliza el componente Basic Autocomplete

Personalice el contenido

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.

Cómo personalizar el tema

Puedes especificar un tema que anule cualquiera de los atributos de estilo predeterminados. Puedes personalizar los colores, la tipografía, el espaciado, los bordes y las esquinas de tu componente Place Details. El valor predeterminado es PlacesMaterialTheme.

Cualquier atributo de tema que no se anule usa los estilos predeterminados.

El kit de IU de Places proporciona un tema oscuro de forma predeterminada, por lo que es posible que debas personalizar los temas claro y oscuro. Para personalizar el tema oscuro, agrega valores para .dark y attribution.darkModeColor a tu tema personalizado.

Consulta la sección Estilo personalizado para obtener más información sobre los temas.

Agrega personalizaciones de contenido y tema al componente Basic Autocomplete

Usa la AutocompleteUICustomization clase para personalizar el componente Basic Autocomplete.

Swift

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

Ejemplo

Agrega un componente Basic Autocomplete

En este ejemplo, se crea un componente Basic Autocomplete personalizado con un botón. Se establecieron el ícono predeterminado, la densidad de la lista de dos líneas y el tema personalizado. El filtro de autocompletado 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,
        theme: PlacesMaterialTheme()
      )
      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)
        }
      }
    }
  }

Cómo personalizar el tema

Swift

@Environment(\.colorScheme) var colorScheme
var theme: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      color.outlineDecorative = (colorScheme == .dark ? .white : .black)
      color.onSurface = (colorScheme == .dark ? .yellow : .red)
      color.onSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      color.onSecondaryContainer = (colorScheme == .dark ? .white : .red)
      color.secondaryContainer = (colorScheme == .dark ? .green : .purple)
      color.positive = (colorScheme == .dark ? .yellow : .red)
      color.primary = (colorScheme == .dark ? .yellow : .purple)
      color.info = (colorScheme == .dark ? .yellow : .purple)
      var shape = PlacesMaterialShape()
      shape.cornerRadius = 10
      var font = PlacesMaterialFont()
      font.labelLarge = .system(size: UIFontMetrics.default.scaledValue(for: 18))
      font.headlineMedium = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyLarge = .system(size: UIFontMetrics.default.scaledValue(for: 15))
      font.bodyMedium = .system(size: UIFontMetrics.default.scaledValue(for: 12))
      font.bodySmall = .system(size: UIFontMetrics.default.scaledValue(for: 11))
      var attribution = PlacesMaterialAttribution()
      attribution.lightModeColor = .black
      attribution.darkModeColor = .white
      theme.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
}