Komponen Place Autocomplete dasar

Komponen Place Autocomplete Dasar dari Places UI Kit memungkinkan Anda menambahkan komponen UI individual yang menampilkan ID tempat saat pengguna memilih tempat. Komponen ini adalah penutup layar penuh yang menyediakan kotak penelusuran bagi pengguna untuk memasukkan kueri. Saat pengguna mengetik, daftar hasil pelengkapan otomatis akan ditampilkan di bawah kotak penelusuran. Saat pengguna mengetuk suatu tempat, objek tempat dengan hanya ID tempat akan ditampilkan kepada developer. Komponen ini dapat disesuaikan.

Komponen ini mengambil batas geografis dan parameter penelusuran lainnya melalui struct AutocompleteFilter.

Respons memberikan struct Place dengan hanya kolom placeID yang diisi.

Komponen Place Autocomplete Dasar memiliki opsi penyesuaian berikut: kepadatan daftar, dan apakah akan menyertakan ikon lokasi. Gunakan struct AutocompleteUICustomization untuk menyesuaikan komponen.

Anda dapat menggunakan komponen Place Autocomplete Dasar secara terpisah atau bersama dengan API dan layanan Google Maps Platform lainnya.

Penagihan

Anda akan ditagih setiap kali komponen dibuka dan kueri dibuat. Anda tidak akan ditagih lagi untuk sesi tersebut kecuali jika sesi berakhir atau tempat dipilih dari daftar.

Menambahkan komponen Autocomplete Dasar ke aplikasi Anda

Tetapkan parameter filter pelengkapan otomatis (misalnya, jenis yang akan ditampilkan, negara yang akan dibatasi hasilnya, koordinat wilayah untuk hasil, dan informasi jarak jika asal pengguna ditetapkan) seperti yang Anda lakukan untuk menggunakan Place Autocomplete (Baru) tanpa Places UI Kit. Lihat dokumentasi Place Autocomplete (Baru) untuk mengetahui petunjuk lengkap dan contoh kode untuk membuat filter pelengkapan otomatis.

Setelah membuat filter pelengkapan otomatis, Anda dapat membuat struct dengan penyesuaian UI. Lihat opsi dan petunjuk penyesuaian.

Kemudian, buat tombol yang akan meluncurkan komponen Pelengkapan Otomatis Dasar yang disesuaikan.

Swift

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

Lihat contoh lengkapnya.

Menyesuaikan komponen Pelengkapan Otomatis Dasar

Menyesuaikan konten

Kepadatan daftar

Anda dapat memilih untuk menampilkan daftar dua baris atau daftar multiline. Gunakan opsi di AutocompleteListDensity (.twoLine atau .multiLine) di class AutocompleteUICustomization. Jika Anda tidak menentukan kepadatan daftar, komponen akan menampilkan daftar dua baris.

Ikon lokasi

Anda dapat memilih apakah akan menampilkan ikon tempat default di daftar hasil. Gunakan opsi di AutocompleteUIIcon (.defaultIcon atau .noIcon) di class AutocompleteUICustomization.

Menyesuaikan tema

Anda dapat menentukan tema yang menggantikan atribut gaya default. Anda dapat menyesuaikan warna, tipografi, jarak, batas, dan sudut komponen Detail Tempat. Defaultnya adalah PlacesMaterialTheme.

Atribut tema yang tidak diganti akan menggunakan gaya default.

Places UI Kit menyediakan tema gelap secara default, jadi Anda mungkin perlu menyesuaikan tema gelap dan terang. Untuk menyesuaikan tema gelap, tambahkan nilai untuk .dark dan attribution.darkModeColor ke tema kustom Anda.

Lihat bagian Gaya kustom untuk mengetahui informasi selengkapnya tentang penerapan tema.

Menambahkan konten dan penyesuaian tema ke komponen Pelengkapan Otomatis Dasar

Gunakan class AutocompleteUICustomization untuk menyesuaikan komponen Pelengkapan Otomatis Dasar.

Swift

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

Contoh

Menambahkan komponen Pelengkapan Otomatis Dasar

Penting: Tetapkan nilai awal showWidget ke false agar komponen yang disesuaikan muncul saat pengguna mengklik tombol.

Contoh ini membuat komponen Basic Autocomplete kustom dengan tombol. Ikon default, kepadatan daftar dua baris, dan tema kustom telah ditetapkan. Filter pelengkapan otomatis disetel untuk menemukan Tempat terkait akuntansi di dan di sekitar Las Vegas.

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

Menyesuaikan tema

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