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 nakładka na pełnym ekranie, która zawiera pasek wyszukiwania, na 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 miejsca ma te opcje dostosowywania: gęstość listy i to, czy mają być uwzględnione 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 płatnością 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 UI Kit Miejsc. Pełne instrukcje znajdziesz w dokumentacji autouzupełniania miejsc (nowego), a przykład kodu do utworzenia filtra autouzupełniania – w tym artykule.

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

Dostosowywanie treści

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.

Dostosowywanie motywu

Możesz określić motyw, który zastąpi dowolny z atrybutów stylu domyślnego. Możesz dostosować kolory, typografię, odstępy, obramowania i rogi komponentu Szczegóły miejsca. Wartość domyślna to PlacesMaterialTheme.

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

Zestaw interfejsu Miejsc domyślnie zawiera ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wartości dla .dark i attribution.darkModeColor do motywu niestandardowego.

Więcej informacji o motywach znajdziesz w sekcji Niestandardowe style.

Dodawanie treści i dostosowywanie motywu w komponencie podstawowego autouzupełniania

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

Swift

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

Przykład

Dodawanie komponentu Podstawowe autouzupełnianie

Ważne: ustaw początkową wartość parametru showWidget na „false”, aby dostosowany komponent pojawiał się, gdy użytkownik kliknie przycisk.

W tym przykładzie tworzymy niestandardowy komponent podstawowego autouzupełniania z przyciskiem. Ustawiono domyślną ikonę, gęstość listy dwuwierszowej i motyw niestandardowy. 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,
        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()
    }
}