Sélectionnez la plate-forme : Android iOS JavaScript

Composant Basic Place Autocomplete

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 plein écran qui fournit une barre de recherche permettant aux utilisateurs de saisir une requête. À 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 prend des limites géographiques et d'autres paramètres de recherche via la AutocompleteFilter struct.

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

Le composant Basic Place Autocomplete propose les options de personnalisation suivantes : densité de la liste et inclusion ou non d'icônes de position. Utilisez la structure AutocompleteUICustomization pour personnaliser le composant.

Vous pouvez utiliser le composant Basic Place Autocomplete indépendamment 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 Basic Autocomplete à votre application

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

Une fois que vous avez créé votre filtre de saisie semi-automatique, vous pouvez créer une structure avec vos personnalisations d'interface utilisateur. Consultez les options et 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
     // ...
  )

Pour afficher l'intégralité du code, cliquez ici.

Personnaliser le composant Basic Autocomplete

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 affiche 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 angles de votre composant Place Details. 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 sombre et clair. 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 Style personnalisé.

Ajouter des personnalisations de contenu et de thème au composant Basic Autocomplete

Utilisez la AutocompleteUICustomization classe pour personnaliser le composant Basic Autocomplete.

Swift

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

Exemple

Ajouter un composant Basic Autocomplete

Cet exemple crée un composant Basic Autocomplete 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 configuré pour rechercher des lieux liés à la comptabilité à Las Vegas et à proximité.

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