Wybierz platformę: Android iOS JavaScript

Podstawowy komponent Autouzupełnianie miejsc

Komponent Podstawowe autouzupełnianie miejsc w interfejsie Places UI Kit umożliwia dodanie pojedynczego komponentu interfejsu, który zwraca identyfikator miejsca, gdy użytkownik wybierze miejsce. Komponent to pełnoekranowa nakładka z paskiem wyszukiwania, w którym użytkownicy mogą wpisać zapytanie. Gdy użytkownik wpisuje tekst, pod paskiem wyszukiwania wyświetla się lista wyników autouzupełniania. Gdy użytkownik kliknie miejsce, deweloperowi zostanie zwrócony obiekt miejsca zawierający tylko identyfikator miejsca. Ten komponent można dostosować.

Komponent przyjmuje granice geograficzne i inne parametry wyszukiwania za pomocą struktury AutocompleteFilter.

Odpowiedź zawiera strukturę Place, w której wypełnione jest tylko pole placeID.

Komponent podstawowego automatycznego uzupełniania miejsc ma te opcje dostosowywania: gęstość listy i to, czy mają być wyświetlane ikony lokalizacji. Aby dostosować komponent, użyj struktury AutocompleteUICustomization.

Komponent podstawowego autouzupełniania miejsca możesz używać niezależnie lub w połączeniu z innymi interfejsami API i usługami Google Maps Platform.

Płatności

Opłata jest naliczana za każdym razem, gdy komponent zostanie otwarty i zostanie wysłane zapytanie. Nie obciążymy Cię ponownie za tę sesję, chyba że wygaśnie lub wybierzesz miejsce z listy.

Dodawanie do aplikacji komponentu podstawowego autouzupełniania

Ustaw parametry filtra autouzupełniania (np. typy do zwrócenia, kraj, do którego mają być ograniczone wyniki, współrzędne regionu dla wyników i informacje o odległości, jeśli ustawiono pochodzenie użytkownika) tak jak w przypadku korzystania z autouzupełniania miejsc (nowego) bez pakietu Places UI Kit. Pełne instrukcje i przykład kodu do utworzenia filtra autouzupełniania znajdziesz w dokumentacji autouzupełniania miejsc (nowego).

Po utworzeniu filtra autouzupełniania możesz utworzyć strukturę z dostosowaniami interfejsu. Wyświetl opcje dostosowywania i instrukcje

Następnie utwórz przycisk, który uruchomi dostosowany komponent podstawowego autouzupełniania.

Swift

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

Zobacz pełny przykład

Dostosowywanie komponentu Podstawowe autouzupełnianie

Gęstość listy

Możesz wyświetlić listę dwuwierszową lub wielowierszową. Użyj opcji w AutocompleteListDensity (.twoLine lub .multiLine) w klasie AutocompleteUICustomization. Jeśli nie określisz gęstości listy, komponent wyświetli listę dwuwierszową.

Ikona lokalizacji

Możesz wybrać, czy na liście wyników ma się wyświetlać domyślna ikona miejsca. Użyj opcji w AutocompleteUIIcon (.defaultIcon lub .noIcon) w klasie AutocompleteUICustomization.

Dodawanie dostosowań do komponentu Podstawowe autouzupełnianie

Aby dostosować komponent podstawowego autouzupełniania, użyj klasy AutocompleteUICustomization.

Swift

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

Przykład

W tym przykładzie tworzymy niestandardowy komponent podstawowego autouzupełniania z przyciskiem. Wybrano domyślną ikonę i dwuwierszową gęstość listy. Filtr autouzupełniania jest ustawiony tak, aby wyszukiwać miejsca związane z księgowością w Las Vegas i jego okolicach.

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