Composant Place Autocomplete de base

Le composant Basic Place Autocomplete du kit d'interface utilisateur Places vous permet d'ajouter un composant d'interface utilisateur individuel qui renvoie un ID de lieu lorsqu'un utilisateur sélectionne un lieu. Le composant est une couverture en plein écran qui fournit une barre de recherche permettant aux utilisateurs de saisir une requête. Au fur et à mesure que l'utilisateur saisit du texte, une liste de résultats de saisie semi-automatique s'affiche sous la barre de recherche. Lorsque l'utilisateur appuie sur un lieu, un objet de lieu contenant uniquement l'ID de lieu est renvoyé au développeur. Ce composant est personnalisable.

Le composant accepte les limites géographiques et d'autres paramètres de recherche via la structure AutocompleteFilter.

La réponse fournit une structure Place avec uniquement le champ placeID renseigné.

Le composant de saisie semi-automatique de base pour les lieux propose les options de personnalisation suivantes : densité de la liste et inclusion ou non des icônes de localisation. Utilisez la structure AutocompleteUICustomization pour personnaliser le composant.

Vous pouvez utiliser le composant de saisie semi-automatique de base pour les lieux de manière indépendante ou en association avec d'autres API et services Google Maps Platform.

Facturation

Vous êtes facturé chaque fois que le composant est ouvert et qu'une requête est effectuée. Vous ne serez plus facturé pour cette session, sauf si elle expire ou si un lieu est sélectionné dans la liste.

Ajouter le composant de saisie semi-automatique de base à votre application

Définissez les paramètres de filtre de saisie semi-automatique (par exemple, les types à renvoyer, le pays auquel limiter les résultats, les coordonnées de la région pour les résultats et les informations de distance si l'origine de l'utilisateur est définie) comme vous le feriez pour utiliser Place Autocomplete (nouveau) sans le Places UI Kit. Consultez la documentation sur Place Autocomplete (nouveau) pour obtenir des instructions complètes et un exemple de code permettant de créer un filtre de saisie semi-automatique.

Une fois que vous avez créé votre filtre d'autocomplétion, vous pouvez créer une structure avec vos personnalisations d'UI. Consultez les options et les instructions de personnalisation.

Créez ensuite un bouton qui lancera votre composant Basic Autocomplete personnalisé.

Swift

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

Voir l'exemple complet

Personnaliser le composant de saisie semi-automatique de base

Densité de la liste

Vous pouvez choisir d'afficher une liste sur deux lignes ou une liste multiligne. Utilisez les options de AutocompleteListDensity (.twoLine ou .multiLine) dans la classe AutocompleteUICustomization. Si vous ne spécifiez pas la densité de la liste, le composant affichera une liste sur deux lignes.

Icône de position

Vous pouvez choisir d'afficher ou non une icône de lieu par défaut dans la liste des résultats. Utilisez les options de AutocompleteUIIcon (.defaultIcon ou .noIcon) dans la classe AutocompleteUICustomization.

Ajouter des personnalisations au composant de saisie semi-automatique de base

Utilisez la classe AutocompleteUICustomization pour personnaliser le composant de saisie semi-automatique de base.

Swift

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

Exemple

Important : Définissez la valeur initiale de showWidget sur "false" pour que votre composant personnalisé s'affiche lorsque l'utilisateur clique sur le bouton.

Cet exemple crée un composant de saisie semi-automatique de base personnalisé avec un bouton. L'icône par défaut et la densité de liste sur deux lignes ont été sélectionnées. Le filtre de saisie semi-automatique est défini pour trouver des lieux liés à la comptabilité à Las Vegas et dans les environs.

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