Sélectionnez une plate-forme : Android iOS JavaScript

Composant Place Autocomplete de base

Le composant Basic Place Autocomplete du kit d'UI Places vous permet d'ajouter un composant d'UI 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 débité 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 (New) 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 de saisie semi-automatique, 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

Personnaliser le contenu

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.

Personnaliser le thème

Vous pouvez spécifier un thème qui remplace l'un des attributs de style par défaut. Vous pouvez personnaliser les couleurs, la typographie, l'espacement, les bordures et les coins de votre composant "Détails du lieu". La valeur par défaut est PlacesMaterialTheme.

Tous les attributs de thème qui ne sont pas remplacés utilisent les styles par défaut.

Le kit d'interface utilisateur Places fournit un thème sombre par défaut. Vous devrez peut-être personnaliser les thèmes clair et sombre. Pour personnaliser le thème sombre, ajoutez des valeurs pour .dark et attribution.darkModeColor à votre thème personnalisé.

Pour en savoir plus sur les thèmes, consultez la section Styles personnalisés.

Ajouter du contenu et des personnalisations de thème 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,
    theme: PlacesMaterialTheme()
)

Exemple

Ajouter un composant de saisie semi-automatique de base

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, la densité de liste sur deux lignes et le thème personnalisé ont été définis. 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,
        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)
        }
      }
    }
  }

Personnaliser le thème

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