Seleziona la piattaforma: Android iOS JavaScript

Componente Place Search

Il componente Place Search di Places UI Kit esegue il rendering dei risultati di una ricerca di luoghi in un elenco.

Componente Place Search di Places UI Kit

Puoi personalizzare l'elenco di Place Search. Puoi specificare:

  • I contenuti da visualizzare
  • Le dimensioni dei contenuti multimediali in orientamento verticale
  • Il troncamento del testo
  • L'orientamento
  • Le sostituzioni del tema che corrispondono al linguaggio di progettazione del brand e dell'app
  • La posizione dell'attribuzione
  • Se un luogo è selezionabile

Puoi anche personalizzare la richiesta per eseguire una SearchByTextRequest o una SearchNearbyRequest.

Fatturazione

Ti viene addebitato un costo ogni volta che viene modificato il valore di binding SearchByTextRequest() o PlaceSearchViewRequest().

Aggiungere Place Search all'app

Aggiungi il widget Place Search utilizzando la PlaceSearchView class.

Swift

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

Quando vuoi che la tua app carichi un risultato di ricerca di testo o di ricerca nelle vicinanze, aggiorna il valore di 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
      )
    )
  )

Inoltre, puoi ricevere callback facoltativi quando il componente viene caricato, viene selezionato un luogo o si verifica un errore durante il caricamento del componente.

Swift

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

Personalizzare il componente Place Search

Personalizzare i contenuti

Devi specificare i contenuti che il componente visualizzerà.

Questo esempio configura il componente in modo che visualizzi l'indirizzo e la valutazione del luogo.

Swift

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

Inoltre, puoi personalizzare facoltativamente i seguenti aspetti dei contenuti visualizzati nel componente Place Search:

  • content: i contenuti visualizzati nel componente.
  • mediaSize: le dimensioni della foto nell'orientamento verticale del frammento. Il valore predefinito è small. Specificato nei contenuti.
  • preferTruncation: indica se troncare il testo di ogni visualizzazione dei dettagli del luogo. Il valore predefinito è false.
  • theme: il tema personalizzato che eredita da PlacesMaterialTheme. Scopri di più sui temi.
  • attributionPosition: indica se mostrare l'attribuzione di Google Maps nella parte superiore o inferiore del componente. Il valore predefinito è .top.
  • selectable: indica se ogni luogo nell'elenco è selezionabile. Se è selezionabile, la chiusura onPlaceSelected verrà chiamata dopo la selezione di un luogo. Il valore predefinito è false.

Aggiungi la configurazione di personalizzazione a 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
)

Personalizzare l'orientamento

L'orientamento predefinito è verticale. Puoi specificare un orientamento orizzontale in PlaceSearchView.

Swift

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

Personalizzare il tema

Puoi specificare un tema che sostituisce uno qualsiasi degli attributi di stile predefiniti. Il valore predefinito è PlacesMaterialTheme.

Per ulteriori informazioni sui temi, consulta la sezione Stili personalizzati.

Places UI Kit fornisce un tema scuro per impostazione predefinita, quindi potresti dover personalizzare sia il tema scuro sia quello chiaro. Per personalizzare il tema scuro, aggiungi i valori per .dark e attribution.darkModeColor al tuo tema personalizzato.

Esempi

Aggiungere il componente 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)")
    }
  }
}

Personalizzare il tema

Places UI Kit fornisce un tema scuro per impostazione predefinita, quindi potresti dover personalizzare sia il tema scuro sia quello chiaro. Per personalizzare il tema scuro, aggiungi i valori per .dark e attribution.darkModeColor al tema personalizzato.

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