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 tek 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

Yer Otomatik Tamamlama (Yeni) özelliğini Places UI Kit olmadan kullanmak için yaptığınız gibi 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) 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

İçeriği ö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.

Temayı özelleştirme

Varsayılan stil özelliklerinden herhangi birini geçersiz kılan bir tema belirtebilirsiniz. Yer ayrıntıları bileşeninizin renklerini, tipografisini, aralığını, kenarlıklarını ve köşelerini özelleştirebilirsiniz. Varsayılan değer: PlacesMaterialTheme.

Geçersiz kılınmayan tüm tema özellikleri varsayılan stilleri kullanır.

Places UI Kit, varsayılan olarak koyu tema sunar. Bu nedenle, hem koyu hem de açık temaları özelleştirmeniz gerekebilir. Koyu temayı özelleştirmek için .dark ve attribution.darkModeColor değerlerini özel temanıza ekleyin.

Tema oluşturma hakkında daha fazla bilgi için Özel stil bölümüne bakın.

Temel Otomatik Tamamlama bileşenine içerik ve tema özelleştirmeleri ekleme

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

Swift

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

Örnek

Temel Otomatik Tamamlama bileşeni ekleme

Önemli: Kullanıcı düğmeyi tıkladığında özelleştirilmiş bileşeninizin görünmesi için showWidget değerinin başlangıçta yanlış olarak ayarlanması gerekir.

Bu örnekte, düğmeli özel bir Temel Otomatik Tamamlama bileşeni oluşturuluyor. Varsayılan simge, iki satırlık liste yoğunluğu ve özel tema ayarlanmıştır. 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,
        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)
        }
      }
    }
  }

Temayı özelleştirme

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