Wybierz platformę: Android iOS JavaScript

Komponent Autouzupełnianie miejsc (podstawowy)

Komponent Autouzupełnianie miejsc (podstawowy) w pakiecie Places UI Kit umożliwia dodanie pojedynczego komponentu interfejsu, który zwraca identyfikator miejsca, gdy użytkownik wybierze miejsce. Komponent to nakładka na pełnym ekranie, która zawiera pasek wyszukiwania, w którym użytkownicy mogą wpisywać zapytania. Podczas wpisywania przez użytkownika pod paskiem wyszukiwania będzie wyświetlana lista wyników autouzupełniania. Gdy użytkownik kliknie miejsce, deweloper otrzyma obiekt miejsca zawierający tylko identyfikator miejsca. Ten komponent można dostosować.

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

Odpowiedź zawiera strukturę Place z wypełnionym tylko polem placeID.

Komponent Autouzupełnianie miejsc (podstawowy) ma te opcje dostosowywania: gęstość listy i to, czy mają być wyświetlane ikony lokalizacji. Aby dostosować komponent, użyj struktury AutocompleteUICustomization.

Komponent Autouzupełnianie miejsc (podstawowy) możesz używać samodzielnie 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 będziemy Cię obciążać płatnościami za tę sesję, chyba że sesja wygaśnie lub z listy zostanie wybrane miejsce.

Dodawanie do aplikacji komponentu Autouzupełnianie (podstawowy)

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

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

Następnie utwórz przycisk, który uruchomi dostosowany komponent Autouzupełnianie (podstawowy).

Swift

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

Zobacz pełny przykład.

Dostosowywanie komponentu Autouzupełnianie (podstawowy)

Dostosuj treść

Gęstość listy

Możesz wyświetlać 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 będzie wyświetlać 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.

Dostosowywanie motywu

Możesz określić motyw, który zastąpi dowolne domyślne atrybuty stylu. Możesz dostosować kolory, typografię, odstępy, obramowania i rogi komponentu Szczegóły miejsca. Domyślna wartość to PlacesMaterialTheme.

Wszystkie atrybuty motywu, które nie zostały zastąpione, używają stylów domyślnych.

Pakiet Places UI Kit domyślnie udostępnia ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wartości .dark i attribution.darkModeColor do motywu niestandardowego.

Więcej informacji o motywach znajdziesz w sekcji Stylizacja niestandardowa.

Dodawanie do komponentu Autouzupełnianie (podstawowy) dostosowań treści i motywu

Aby dostosować komponent Autouzupełnianie (podstawowy), użyj klasy AutocompleteUICustomization.

Swift

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

Przykład

Dodawanie komponentu Autouzupełnianie (podstawowy)

Ten przykład tworzy niestandardowy komponent Autouzupełnianie (podstawowy) z przyciskiem. Ustawiono domyślną ikonę, gęstość listy dwuwierszowej i motyw niestandardowy. Filtr autouzupełniania jest ustawiony tak, aby znajdować 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,
        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)
        }
      }
    }
  }

Dostosowywanie motywu

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