Pilih platform: Android iOS JavaScript

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 Basic Autocomplete 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

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.

Menambahkan penyesuaian ke komponen Pelengkapan Otomatis Dasar

Gunakan class AutocompleteUICustomization untuk menyesuaikan komponen Pelengkapan Otomatis Dasar.

Swift

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

Contoh

Contoh ini membuat komponen Basic Autocomplete kustom dengan tombol. Ikon default dan kepadatan daftar dua baris telah dipilih. 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)
      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)
        }
      }
    }
  }