Plattform auswählen: Android iOS JavaScript

Einfache Place Autocomplete-Komponente

Mit der einfachen Place Autocomplete-Komponente des Places UI Kit können Sie eine einzelne UI-Komponente hinzufügen, die eine Orts-ID zurückgibt, wenn ein Nutzer einen Ort auswählt. Die Komponente ist eine Vollbildabdeckung mit einer Suchleiste, in die Nutzer eine Abfrage eingeben können. Während der Eingabe wird unter der Suchleiste eine Liste mit Ergebnissen für die automatische Vervollständigung angezeigt. Wenn der Nutzer auf einen Ort tippt, wird ein Ortsobjekt mit nur der Orts-ID an den Entwickler zurückgegeben. Diese Komponente ist anpassbar.

Die Komponente verwendet geografische Grenzen und andere Suchparameter über die AutocompleteFilter-Struktur.

Die Antwort enthält eine Place-Struktur, in der nur das Feld placeID ausgefüllt ist.

Die einfache Place Autocomplete-Komponente bietet die folgenden Anpassungsoptionen: Listendichte und ob Standortsymbole enthalten sein sollen. Verwenden Sie die AutocompleteUICustomization-Struktur, um die Komponente anzupassen.

Sie können die einfache Place Autocomplete-Komponente unabhängig oder in Verbindung mit anderen Google Maps Platform-APIs und ‑Diensten verwenden.

Abrechnung

Jedes Mal, wenn die Komponente geöffnet und eine Abfrage ausgeführt wird, werden Ihnen Kosten in Rechnung gestellt. Für diese Sitzung werden Ihnen keine weiteren Kosten in Rechnung gestellt, es sei denn, die Sitzung läuft ab oder ein Ort wird aus der Liste ausgewählt.

Einfache Autocomplete-Komponente zu Ihrer App hinzufügen

Legen Sie die Parameter für den Autocomplete-Filter fest (z. B. die zurückzugebenden Typen, das Land, auf das die Ergebnisse beschränkt werden sollen, die Koordinaten der Region für die Ergebnisse und Entfernungsangaben, wenn der Ursprungsort des Nutzers festgelegt ist). Das funktioniert genauso wie bei der Verwendung von Place Autocomplete (New) ohne das Places UI Kit. Eine vollständige Anleitung und ein Codebeispiel zum Erstellen eines Autocomplete-Filters finden Sie in der Dokumentation zu Place Autocomplete (New).

Nachdem Sie den Autocomplete-Filter erstellt haben, können Sie eine Struktur mit Ihren UI-Anpassungen erstellen. Weitere Informationen und eine Anleitung finden Sie unter Anpassungsoptionen.

Erstellen Sie dann eine Schaltfläche, mit der die angepasste einfache Autocomplete-Komponente gestartet wird.

Swift

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

Vollständiges Beispiel ansehen.

Einfache Autocomplete-Komponente anpassen

Inhalt anpassen

Listendichte

Sie können eine zweizeilige oder eine mehrzeilige Liste anzeigen lassen. Verwenden Sie die Optionen in AutocompleteListDensity (.twoLine oder .multiLine) in der AutocompleteUICustomization Klasse. Wenn Sie die Listendichte nicht angeben, wird in der Komponente eine zweizeilige Liste angezeigt.

Standortsymbol

Sie können festlegen, ob in der Ergebnisliste ein Standardsymbol für Orte angezeigt werden soll. Verwenden Sie die Optionen in AutocompleteUIIcon (.defaultIcon oder .noIcon) in der AutocompleteUICustomization Klasse.

Design anpassen

Sie können ein Design angeben, das alle Standardstilattribute überschreibt. Sie können die Farben, Typografie, Abstände, Rahmen und Ecken der Komponente „Ortsdetails“ anpassen. Der Standardwert ist PlacesMaterialTheme.

Für alle Designattribute, die nicht überschrieben werden, werden die Standardstile verwendet.

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.

Weitere Informationen zu Designs finden Sie im Abschnitt Benutzerdefinierte Stile.

Inhalts- und Designanpassungen zur einfachen Autocomplete-Komponente hinzufügen

Verwenden Sie die AutocompleteUICustomization Klasse, um die einfache Autocomplete-Komponente anzupassen.

Swift

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

Beispiel

Einfache Autocomplete-Komponente hinzufügen

In diesem Beispiel wird eine benutzerdefinierte einfache Autocomplete-Komponente mit einer Schaltfläche erstellt. Das Standardsymbol, die zweizeilige Listendichte und das benutzerdefinierte Design wurden festgelegt. Der Autocomplete-Filter ist so konfiguriert, dass Orte mit Bezug zu Buchhaltung in und in der Nähe von Las Vegas gesucht werden.

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

Design anpassen

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