Sélectionnez la plate-forme : Android iOS JavaScript

Composant Place Search

Le composant Place Search du kit d'interface utilisateur Places affiche les résultats d'une recherche de lieu dans une liste.

Composant Place Search du Kit UI pour Places

Vous pouvez personnaliser la liste Place Search. Vous pouvez spécifier ce qui suit :

  • Le contenu à afficher
  • La taille du média en orientation verticale
  • La troncation du texte
  • L'orientation
  • Les remplacements de thème qui correspondent à votre marque et au langage de conception de votre application
  • La position de l'attribution
  • Si un lieu est sélectionnable

Vous pouvez également personnaliser la requête pour effectuer une SearchByTextRequest ou une SearchNearbyRequest.

Facturation

Vous êtes facturé chaque fois que la valeur de liaison SearchByTextRequest() ou PlaceSearchViewRequest() est modifiée.

Ajouter Place Search à votre application

Ajoutez le widget Place Search à l'aide de la PlaceSearchView class.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Lorsque vous souhaitez que votre application charge un résultat de recherche textuelle ou de recherche à proximité, mettez à jour votre valeur PlaceSearchViewRequest.

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )

Vous pouvez également recevoir des rappels lorsque le composant se charge, qu'un lieu est sélectionné ou qu'une erreur se produit lors du chargement du composant.

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}

Personnaliser le composant Place Search

Personnaliser le contenu

Vous devez spécifier le contenu que votre composant affichera.

Cet exemple configure le composant pour afficher l'adresse et la note du lieu.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

Vous pouvez également personnaliser les aspects suivants du contenu qui s'affiche dans votre composant Place Search :

  • content: contenu affiché dans le composant.
  • mediaSize: taille de la photo dans l'orientation verticale du fragment. La valeur par défaut est "small". Spécifié dans le contenu.
  • preferTruncation: indique s'il faut tronquer le texte de chaque vue des détails du lieu. La valeur par défaut est "false".
  • theme: thème personnalisé qui hérite de PlacesMaterialTheme. En savoir plus sur les thèmes
  • attributionPosition: indique s'il faut afficher l'attribution Google Maps en haut ou en bas du composant. La valeur par défaut est ".top".
  • selectable: indique si chaque lieu de la liste est sélectionnable. Si c'est le cas, la fermeture onPlaceSelected est appelée après la sélection d'un lieu. La valeur par défaut est "false".

Ajoutez votre configuration de personnalisation à PlaceSearchConfiguration.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)

Personnaliser l'orientation

L'orientation par défaut est verticale. Vous pouvez spécifier une orientation horizontale dans PlaceSearchView.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Personnaliser le thème

Vous pouvez spécifier un thème qui remplace l'un des attributs de style par défaut. La valeur par défaut est PlacesMaterialTheme.

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

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é.

Exemples

Ajouter le composant Place Search

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}

Personnaliser le thème

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é.

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