Platform seçin: Android iOS JavaScript

Yer Arama bileşeni

Places UI Kit'in Yer Arama bileşeni, yer arama sonuçlarını bir listede oluşturur.

Places UI Kit Yer Arama bileşeni

Yer Arama listesini özelleştirebilirsiniz. Şunları belirtebilirsiniz:

  • Gösterilecek içerik
  • Dikey yönde medya boyutu
  • Metin kesme
  • Yön
  • Markanızın ve uygulamanızın tasarım diline uygun tema geçersiz kılma işlemleri
  • İlişkilendirmenin konumu
  • Bir yerin seçilebilir olup olmadığı

İsteği Search by text request veya Search Nearby request işlemi yapacak şekilde de özelleştirebilirsiniz.

Faturalandırma

SearchByTextRequest() veya PlaceSearchViewRequest() bağlama değeri her değiştirildiğinde faturalandırılırsınız.

Uygulamanıza Yer Arama ekleme

PlaceSearchView class simgesini kullanarak Yer Arama widget'ını ekleyin.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Uygulamanızın bir metin arama veya yakındaki arama sonucu yüklemesini istediğinizde PlaceSearchViewRequest değerinizi güncelleyin.

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )

Bileşen yüklendiğinde, bir yer seçildiğinde veya bileşeni yüklerken bir hata oluştuğunda geri arama da alabilirsiniz.

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}

Yer Arama bileşenini özelleştirme

İçeriği özelleştirme

Bileşeninizin hangi içeriği göstereceğini belirtmeniz gerekir.

Bu örnekte, bileşen, yerin adresini ve puanını gösterecek şekilde yapılandırılır.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

Ayrıca, yer arama bileşeninizde görünen içeriğin aşağıdaki yönlerini isteğe bağlı olarak özelleştirebilirsiniz:

  • content: Bileşende gösterilen içerik.
  • mediaSize: Parçanın dikey yönündeki fotoğraf boyutu. Varsayılan değer küçüktür. İçerikte belirtilir.
  • preferTruncation: Her bir yer ayrıntıları görünümünün metninin kesilip kesilmeyeceği. Varsayılan değer false'tur.
  • theme: PlacesMaterialTheme'den devralınan özel temanız. Temalar hakkında daha fazla bilgi edinin.
  • attributionPosition: Google Haritalar ilişkilendirmesinin bileşenin üstünde mi yoksa altında mı gösterileceği. Varsayılan değer .top'tur.
  • selectable: Listedeki her yerin seçilebilir olup olmadığı. Seçilebiliyorsa bir yer seçildikten sonra onPlaceSelected kapatma işlemi çağrılır. Varsayılan değer false'tur.

Özelleştirme yapılandırmanızı PlaceSearchConfiguration'ye ekleyin.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)

Yönü özelleştirme

Varsayılan yön dikeydir. PlaceSearchView içinde yatay yön belirtebilirsiniz.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

Temayı özelleştirme

Varsayılan stil özelliklerinden herhangi birini geçersiz kılan bir tema belirtebilirsiniz. Varsayılan değer PlacesMaterialTheme'dir. Tema oluşturma hakkında daha fazla bilgi için Yer Ayrıntıları bileşeni belgelerini inceleyin.

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

Örnek

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}