Yer Ayrıntıları Kullanıcı Arayüzü Kiti (Deneysel)

Bu ürün veya özellik deneyseldir (GKST öncesi). GKST öncesi ürünler ve özelliklere verilen destek sınırlı olabilir. Ayrıca bu ürünler ve özelliklerde yapılan değişiklikler, GKST öncesi diğer sürümlerle uyumlu olmayabilir. GKST Öncesi Teklifler, Google Haritalar Platformu Hizmete Özgü Şartlar'a tabidir. Daha fazla bilgi için lansman aşamalarının açıklamalarını inceleyin.

Yer Ayrıntıları için Yer Ayrıntıları Kullanıcı Arayüzü Kiti, uygulamanızda yer ayrıntılarını gösteren ayrı bir kullanıcı arayüzü bileşeni eklemenize olanak tanır. Kullanıcı arayüzü kiti bağımsız olarak veya diğer Google Haritalar Platformu API'leri ve hizmetleriyle birlikte kullanılabilir. Kullanıcı arayüzü kiti, bir yer kimliği veya enlem/boylam koordinatları alır ve oluşturulmuş yer ayrıntıları bilgilerini döndürür.

Kullanıcı arayüzü kiti, yatay veya dikey olarak görüntülenebilen kompakt bir görünüm sunar. Özel PlaceWidgetTheme değerleri sağlayarak yer ayrıntılarının görünümünü özelleştirebilirsiniz. Ayrıca, her biri yerle ilgili gösterilen bir bilgiye karşılık gelen PlaceDetailsCompactView girişlerinin listesini belirterek hangi yer ayrıntıları alanlarının dahil edileceğini özelleştirebilirsiniz.

Not: Yer Ayrıntıları Kullanıcı Arayüzü Kiti yalnızca PlacesSwift SDK'sında kullanılabilir.

Faturalandırma

Yer Ayrıntıları için Yer Ayrıntıları Kullanıcı Arayüzü Kiti'ni kullanırken PlaceDetailsQuery yöntemi her çağrıldığında ücretlendirilirsiniz. Aynı yeri birden çok kez yüklerseniz her istek için faturalandırılırsınız.

Yerler kullanıcı arayüzü kitini etkinleştirme

Yerler kullanıcı arayüzü kitini kullanmadan önce:

• Faturalandırma hesabı içeren bir Cloud projesi oluşturun.
• Projeniz için Places UI Kit API'yi etkinleştirin.
• API anahtarı alma.

Yer Ayrıntıları kullanıcı arayüzü kiti örnekleri

Yer Ayrıntıları widget'ı bir Swift UI Görünümü'dür. Yer ayrıntıları bilgilerinin görünümünü ve tarzını ihtiyaçlarınıza ve uygulamanızın görünümüne uyacak şekilde özelleştirebilirsiniz.

Yönlendirmeyi (yatay veya dikey), tema geçersiz kılma işlemlerini ve içeriği belirtebilirsiniz. İçerik seçenekleri medya, adres, puan, fiyat, tür, erişilebilir giriş, haritalar bağlantısı ve yol tarifi bağlantısıdır. Özelleştirme örneğine bakın.

Varsayılan konum dikeydir. Yatay bir düzen istiyorsanız PlaceDetailsCompactView içinde orientation: .horizontal değerini belirtin.

Bu örnekte, dikey düzene sahip kompakt bir görünüm oluşturulur.

Swift

      
  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlaceWidgetTheme {
    if customTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .white
      return theme
    } else {
      return PlaceWidgetTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

  

Bu örnekte, yatay düzene sahip kompakt bir görünüm oluşturulur.

Swift

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var customTheme = false
  var theme: PlaceWidgetTheme {
    if customTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .white
      return theme
    } else {
      return PlaceWidgetTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

Özelleştirme örneği

Not: Renk veya yazı tipi belirtilmezse varsayılan değer kullanılır.

Bu örnekte, varsayılan stil özelliklerinin nasıl özelleştirileceği gösterilmektedir.

Swift

  // Callback for the place details widget.
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  
  @Environment(\.colorScheme) var colorScheme
  
  var theme: PlaceWidgetTheme {
      var theme = PlaceWidgetTheme()
      theme.colorSurfaceContainerLowest = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorOnSurface = (colorScheme == .dark ? .yellow : .red)
      theme.colorOnSurfaceVariant = (colorScheme == .dark ? .white : .blue)
      theme.colorOnSecondaryContainer = (colorScheme == .dark ? .white : .red)
      theme.colorSecondaryContainer = (colorScheme == .dark ? .green : .purple)
      theme.colorPositive = (colorScheme == .dark ? .yellow : .red)
      theme.colorPrimary = (colorScheme == .dark ? .yellow : .purple)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.labelLarge = .system(size: 15)
      theme.headlineMedium = .system(size: 14)
      theme.bodyLarge = .system(size: 13)
      theme.bodyMedium = .system(size: 12)
      theme.bodySmall = .system(size: 11)
      theme.attributionColorLight = .black
      theme.attributionColorDark = .white
      return theme
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .mapsLink(), .directionsLink()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }