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.

Places UI Kit-Komponente „Place Search“

Sie können die Place Search-Liste anpassen. Sie können Folgendes angeben:

  • Die anzuzeigenden Inhalte
  • Mediengröße bei vertikaler Ausrichtung
  • Textkürzung
  • Die Ausrichtung
  • Designüberschreibungen, die zu Ihrer Marke und der Designsprache Ihrer App passen
  • Position der Quellenangabe
  • Ob ein Ort ausgewählt werden kann

Sie können die Anfrage auch anpassen, um entweder eine SearchByTextRequest oder eine SearchNearbyRequest auszuführen.

Abrechnung

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

Place Search in Ihre App einbinden

Fügen Sie das Place Search-Widget mit PlaceSearchView class hinzu.

Swift

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

Wenn Ihre App ein Ergebnis für die Textsuche oder die 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
      )
    )
  )

Optional können Sie 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 „Ortssuche“ angezeigt werden:

  • content: Der in der Komponente angezeigte Inhalt.
  • mediaSize: Die Fotogröße in der vertikalen Ausrichtung des Fragments. Der Standardwert ist „Klein“. Im Inhalt angegeben.
  • preferTruncation: Gibt an, ob der Text der einzelnen Place Details-Ansichten 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 sie ausgewählt werden kann, wird onPlaceSelected-Schließung aufgerufen, nachdem ein Ort ausgewählt wurde. Der Standardwert ist "false".

Fügen Sie der Datei PlaceSearchConfiguration Ihre Anpassungskonfiguration 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 im Abschnitt Benutzerdefinierte Formatierung.

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie Ihrem benutzerdefinierten Design Werte für .dark und attribution.darkModeColor hinzu.

Beispiele

„Place Search“-Komponente hinzufügen

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

Design anpassen

Das Places UI Kit bietet standardmäßig ein dunkles Design. Möglicherweise müssen Sie also sowohl das dunkle als auch das helle Design anpassen. Wenn Sie das dunkle Design anpassen möchten, fügen Sie Ihrem benutzerdefinierten Design Werte für .dark und attribution.darkModeColor hinzu.

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