Plattform auswählen: Android iOS JavaScript

„Place Search“-Komponente

Die „Place Search“-Komponente des Places UI Kit rendert die Ergebnisse einer Ortssuche in einer Liste.

„Place Search“-Komponente des Places UI Kit

Sie können die Liste der Ortssuche anpassen. Sie können Folgendes angeben:

  • Die anzuzeigenden Inhalte
  • Mediengröße bei vertikaler Ausrichtung
  • Textlänge anpassen
  • Die Ausrichtung
  • Designüberschreibungen, die zur Marken- und Designsprache Ihrer App passen
  • Position der Quellenangabe
  • Ob ein Ort ausgewählt werden kann

Sie können die Anfrage auch so anpassen, dass entweder ein Search by text request oder ein Search Nearby request ausgeführt wird.

Abrechnung

Die Abrechnung erfolgt jedes Mal, wenn der Bindungswert für SearchByTextRequest() oder PlaceSearchViewRequest() geändert wird.

Place Search in Ihre App einfügen

Fügen Sie das „Place Search“-Widget über PlaceSearchView class hinzu.

Swift

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

Wenn Ihre App ein Ergebnis einer Textsuche oder einer Suche in der Nähe laden soll, aktualisieren Sie den Wert 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
      )
    )
  )

Sie können optional auch Callbacks erhalten, wenn die Komponente geladen wird, ein Ort ausgewählt wird oder beim Laden der Komponente ein Fehler auftritt.

Swift

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

„Place Search“-Komponente anpassen

Inhalte anpassen

Sie müssen angeben, welche Inhalte in Ihrer Komponente angezeigt werden sollen.

In diesem Beispiel wird die Komponente so konfiguriert, dass die Adresse und die Bewertung des Orts angezeigt werden.

Swift

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

Sie können auch die folgenden Aspekte der Inhalte anpassen, die in der Komponente „Ortsuche“ angezeigt werden:

  • content: Der in der Komponente angezeigte Inhalt.
  • mediaSize: Die Fotogröße in der vertikalen Ausrichtung des Fragments. Der Standardwert ist „small“. Im Inhalt angegeben.
  • preferTruncation: Gibt an, ob der Text jeder Ansicht mit Ortsdetails gekürzt werden soll. Der Standardwert ist "false".
  • theme: Ihr benutzerdefiniertes Design, das von PlacesMaterialTheme abgeleitet wird. Weitere Informationen zum Festlegen von Designs
  • attributionPosition: Gibt an, ob die Quellenangabe für Google Maps oben oder unten in der Komponente angezeigt werden soll. Der Standardwert ist .top.
  • selectable: Gibt an, ob jeder Ort in der Liste ausgewählt werden kann. Wenn die Option ausgewählt werden kann, wird onPlaceSelected nach der Auswahl eines Orts aufgerufen. Der Standardwert ist "false".

Fügen Sie PlaceSearchConfiguration Ihre Konfiguration für die Anpassung hinzu.

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
)

Ausrichtung anpassen

Die Standardausrichtung ist vertikal. Sie können eine horizontale Ausrichtung in PlaceSearchView angeben.

Swift

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

Design anpassen

Sie können ein Design angeben, das alle Standardstilattribute überschreibt. Der Standardwert ist PlacesMaterialTheme. Weitere Informationen zum Theming finden Sie in der Dokumentation zur Komponente „Ortsdetails“.

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

Beispiel

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