Platform seçin: Android iOS JavaScript

Temel Yer Adı Otomatik Tamamlama bileşeni

Places UI Kit'in Temel Yer Otomatik Tamamlama bileşeni, kullanıcı bir yer seçtiğinde yer kimliği döndüren ayrı bir kullanıcı arayüzü bileşeni eklemenize olanak tanır. Bu bileşen, kullanıcılara sorgu girmeleri için bir arama çubuğu sağlayan tam ekran bir kaplamadır. Kullanıcı yazarken arama çubuğunun altında otomatik tamamlama sonuçlarının listesi gösterilir. Kullanıcı bir yere dokunduğunda, geliştiriciye yalnızca yer kimliği içeren bir yer nesnesi döndürülür. Bu bileşen özelleştirilebilir.

Bileşen, AutocompleteFilter yapısı aracılığıyla coğrafi sınırları ve diğer arama parametrelerini alır.

Yanıtta yalnızca placeID alanı doldurulmuş bir Place yapısı sağlanıyor.

Temel Yer Otomatik Tamamlama bileşeninde aşağıdaki özelleştirme seçenekleri bulunur: liste yoğunluğu ve konum simgelerinin dahil edilip edilmeyeceği. Bileşeni özelleştirmek için AutocompleteUICustomization yapısını kullanın.

Temel Yer Otomatik Tamamlama bileşenini bağımsız olarak veya diğer Google Haritalar Platformu API'leri ve hizmetleriyle birlikte kullanabilirsiniz.

Faturalandırma

Bileşen her açıldığında ve sorgu yapıldığında sizden ücret alınır. Oturumun süresi dolmadığı veya listeden bir yer seçilmediği sürece bu oturum için tekrar faturalandırılmazsınız.

Uygulamanıza Temel Otomatik Tamamlama bileşenini ekleme

Otomatik tamamlama filtresi parametrelerini (ör. döndürülecek türler, sonuçların sınırlandırılacağı ülke, sonuçların bölge koordinatları ve kullanıcıların kaynağı ayarlanmışsa mesafe bilgileri) Places UI Kit olmadan Yer Otomatik Tamamlama (Yeni) özelliğini kullanıyormuş gibi ayarlayın. Tam talimatlar ve otomatik tamamlama filtresi oluşturmak için kod örneği için Yer Otomatik Tamamlama (Yeni) dokümanlarına bakın.

Otomatik tamamlama filtrenizi oluşturduktan sonra, kullanıcı arayüzü özelleştirmelerinizi içeren bir yapı oluşturabilirsiniz. Özelleştirme seçeneklerini ve talimatlarını inceleyin.

Ardından, özelleştirilmiş Basic Autocomplete bileşenini başlatacak bir düğme oluşturun.

Swift

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

Tam örneği inceleyin.

Temel Otomatik Tamamlama bileşenini özelleştirme

Liste yoğunluğu

İki satırlık veya çok satırlık bir liste görüntülemeyi seçebilirsiniz. AutocompleteUICustomization sınıfında AutocompleteListDensity (.twoLine veya .multiLine) seçeneklerini kullanın. Liste yoğunluğunu belirtmezseniz bileşen iki satırlık bir liste gösterir.

Konum simgesi

Sonuç listesinde varsayılan bir yer simgesi gösterip göstermeyeceğinizi seçebilirsiniz. AutocompleteUICustomization sınıfında AutocompleteUIIcon (.defaultIcon veya .noIcon) seçeneklerini kullanın.

Temel Otomatik Tamamlama bileşenine özelleştirmeler ekleme

Basic Autocomplete bileşenini özelleştirmek için AutocompleteUICustomization sınıfını kullanın.

Swift

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

Örnek

Bu örnekte, düğmeli özel bir Temel Otomatik Tamamlama bileşeni oluşturuluyor. Varsayılan simge ve iki satırlık liste yoğunluğu seçilmiştir. Otomatik tamamlama filtresi, Las Vegas ve çevresinde muhasebeyle ilgili yerleri bulacak şekilde ayarlanmıştır.

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