Componente Basic Place Autocomplete

Il componente Place Autocomplete di Places UI Kit consente di aggiungere un singolo componente UI che restituisce un ID luogo quando un utente seleziona un luogo. Il componente è una copertina a schermo intero che fornisce una barra di ricerca in cui gli utenti possono inserire una query. Man mano che l'utente digita, sotto la barra di ricerca viene visualizzato un elenco di risultati di completamento automatico. Quando l'utente tocca un luogo, allo sviluppatore viene restituito un oggetto luogo con solo l'ID luogo. Questo componente è personalizzabile.

Il componente accetta limiti geografici e altri parametri di ricerca tramite lo struct AutocompleteFilter.

La risposta fornisce una struttura Place con il solo campo placeID compilato.

Il componente Basic Place Autocomplete ha le seguenti opzioni di personalizzazione: densità dell'elenco e inclusione o meno delle icone di località. Utilizza lo struct AutocompleteUICustomization per personalizzare il componente.

Puoi utilizzare il componente Completamento automatico di base dei luoghi in modo indipendente o in combinazione con altri servizi e API di Google Maps Platform.

Fatturazione

Viene addebitato un costo ogni volta che il componente viene aperto e viene eseguita una query. Non ti verrà addebitato alcun importo per la sessione, a meno che non scada o venga selezionato un luogo dall'elenco.

Aggiungere il componente Completamento automatico di base all'app

Imposta i parametri del filtro di completamento automatico (ad esempio, i tipi da restituire, il paese a cui limitare i risultati, le coordinate della regione per i risultati e le informazioni sulla distanza se l'origine degli utenti è impostata) come faresti per utilizzare Place Autocomplete (New) senza Places UI Kit. Consulta la documentazione di Place Autocomplete (New) per istruzioni complete e un esempio di codice per creare un filtro di completamento automatico.

Dopo aver creato il filtro di completamento automatico, puoi creare una struttura con le personalizzazioni dell'interfaccia utente. Visualizza le opzioni e le istruzioni di personalizzazione.

Poi, crea un pulsante che avvii il componente di completamento automatico di base personalizzato.

Swift

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

Vedi l'esempio completo.

Personalizzare il componente Completamento automatico di base

Compattezza elenco

Puoi scegliere di visualizzare un elenco di due righe o un elenco multilinea. Utilizza le opzioni in AutocompleteListDensity (.twoLine o .multiLine) nel corso AutocompleteUICustomization. Se non specifichi la densità dell'elenco, il componente visualizzerà un elenco di due righe.

Icona della posizione

Puoi scegliere se visualizzare un'icona del luogo predefinita nell'elenco dei risultati. Utilizza le opzioni in AutocompleteUIIcon (.defaultIcon o .noIcon) nel corso AutocompleteUICustomization.

Aggiungere personalizzazioni al componente Completamento automatico di base

Utilizza la classe AutocompleteUICustomization per personalizzare il componente Completamento automatico di base.

Swift

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

Esempio

Importante:imposta il valore iniziale di showWidget su false per visualizzare il componente personalizzato quando l'utente fa clic sul pulsante.

Questo esempio crea un componente di completamento automatico di base personalizzato con un pulsante. Sono state selezionate l'icona predefinita e la densità dell'elenco a due righe. Il filtro di completamento automatico è impostato per trovare luoghi correlati alla contabilità a Las Vegas e nelle vicinanze.

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