Bu sayfa, Cloud Translation API ile çevrilmiştir.

Platform seçin: Android iOS JavaScript

Yer ayrıntıları bileşeni

Places UI Kit'in Yer Ayrıntıları bileşeni, uygulamanızda yer ayrıntılarını gösteren bağımsız bir kullanıcı arayüzü bileşeni eklemenize olanak tanır. Bu bileşen özelleştirilebilir.

Yer Ayrıntıları bileşeni bağımsız olarak veya diğer Google Haritalar Platformu API'leri ve hizmetleriyle birlikte kullanılabilir. Bileşen, Yer Kimliği, kaynak adı veya enlem/boylam koordinatlarını alır ve oluşturulmuş Yer Ayrıntıları bilgilerini döndürür.

Yer Ayrıntıları bileşeni tamamen temalandırılabilir. Böylece, kullanım alanınıza ve görsel marka kurallarınıza uygun olarak yazı tiplerini, renkleri ve köşe yarıçaplarını özelleştirebilirsiniz. Özel PlacesMaterialTheme değerleri sağlayarak yer ayrıntılarının görünümünü özelleştirebilirsiniz. Ayrıca, PlaceDetailsCompactView girişlerinden oluşan bir liste belirterek hangi yer ayrıntıları alanlarının dahil edileceğini özelleştirebilirsiniz. Bu girişlerin her biri, yer hakkında gösterilen bir bilgiye karşılık gelir.

Düzen varyantları

Yer Ayrıntıları bileşeni iki ana düzen varyantını destekler:

Kompakt: Önemli bilgileri önizlemek için kullanılan düzen.
Tam: Mevcut tüm yer ayrıntılarını gösteren kapsamlı düzen.

Kompakt düzen, dikey veya yatay yönde görüntülenebilir. Bu sayede bileşeni çeşitli tasarım düzenlerine ve ekran boyutlarına entegre edebilirsiniz. Tam düzen yalnızca dikey olarak görüntülenebilir.

yatay ve dikey düzenler — Yatay ve dikey düzenler

Yer Ayrıntıları bileşeni, bileşende gösterilen içerik üzerinde ayrıntılı kontrol sahibi olmanızı sağlar. Her öğe (ör. fotoğraflar, yorumlar ve iletişim bilgileri) ayrı ayrı gösterilebilir veya gizlenebilir. Böylece bileşenlerin görünümü ve bilgi yoğunluğu hassas bir şekilde özelleştirilebilir.

Yer ayrıntıları içerik seçenekleri — İçerik görüntüleme seçenekleri

Yer ayrıntıları kompakt görünümü

Yer ayrıntıları kompakt görünümü (PlaceDetailsCompactView), seçilen bir yerin ayrıntılarını minimum alan kullanarak oluşturur. Bu, haritadaki bir yeri vurgulayan bilgi penceresinde, sohbette konum paylaşma gibi bir sosyal medya deneyiminde, mevcut konumunuzu seçme önerisi olarak veya Google Haritalar'daki yere referans vermek için bir medya makalesinde faydalı olabilir.

Yer ayrıntılarının tam görünümü

Yer ayrıntılarının tam görünümü (PlaceDetailsView), yer ayrıntıları bilgilerini göstermek için daha büyük bir alan sunar ve daha fazla bilgi türü göstermenize olanak tanır.

İçerik görüntüleme seçenekleri

PlaceDetailsCompactContent veya PlaceDetailsContent içindeki numaralandırmaları kullanarak hangi içeriğin gösterileceğini belirtebilirsiniz.

Kompakt görünüm	Tam görünüm
Yer fotoğrafı Yer adresi Puan ve puan sayısı Yer türü Fiyat Tekerlekli sandalyeye uygun giriş bilgileri Şu anda açık durumu	Yer fotoğrafı kolajı Yer adresi Puan ve puan sayısı Yer türü Fiyat Erişilebilirlik bilgileri Şu anda açık durumu Çalışma saatleri İçerik özeti Web sitesi Telefon numarası Yorumlar özel sekmede gösterilir. Plus code Özel bir sekmede oluşturulan özellik listesi Türe özgü önemli noktalar (ör. benzin istasyonları için benzin fiyatları)

Faturalandırma

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

Uygulamanıza yer ayrıntıları ekleme

Yer Ayrıntıları bileşeni, Swift UI View'dur. 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. Özelleştirme hakkında daha fazla bilgi edinin.

Yer Ayrıntıları bileşenini bir yer kimliği, kaynak adı veya enlem/boylam koordinatlarıyla yüklemeyi seçebilirsiniz. İstediğiniz yöntemi veya yöntemleri seçebilirsiniz. PlaceDetailsQuery yapısındaki identifier değerini .placeID, .resourceName veya .coordinate olarak ayarlayın.

Kompakt görünümün varsayılan konumu dikey moddur. Yatay bir düzen istiyorsanız PlaceDetailsCompactView içinde orientation: .horizontal değerini belirtin. Dilerseniz netlik için orientation: .vertical de belirtebilirsiniz. Tam görünüm yalnızca dikey olarak görüntülenebilir.

Örnekleri Yer Ayrıntıları bileşeni örnekleri bölümünde bulabilirsiniz.

Görsel görünümü özelleştirme

Yer ayrıntıları görsel özelleştirme — Görsel özelleştirme örnekleri

Places UI kiti, görsel özelleştirme için kabaca Material Design'a (Google Haritalar'a özgü bazı değişikliklerle) dayalı bir tasarım sistemi yaklaşımı sunar. Renk ve Yazı Biçimi ile ilgili Materyal Tasarım referansına bakın. Varsayılan olarak, stil Google Haritalar'ın görsel tasarım diline uygundur.

Yer ayrıntılarını özelleştirme seçenekleri

Bileşenin görünümü ve tarzı placesMaterialColor, placesMaterialFont, placesMaterialShape ve placesMaterialTheme yapılarıyla özelleştirilir.

Aşağıdaki stilleri özelleştirebilirsiniz:

İletişim kutusu rengi ve tipografi özelleştirme

Theme özelliği	Kullanım
Renk
`theme.color.surface`	Kapsayıcı ve iletişim kutusu arka planı
`theme.color.outlineDecorative`	Kapsayıcı kenarlığı
`theme.color.primary`	Bağlantılar, yükleme göstergesi, genel bakış simgeleri
`theme.color.onSurface`	Başlıklar, iletişim kutusu içeriği
`theme.color.onSurfaceVariant`	Yer bilgileri
`theme.color.secondaryContainer`	Düğme arka planı
`theme.color.onSecondaryContainer`	Düğme metni ve simgesi
`theme.color.neutralContainer`	Tarih rozetini ve yükleme yer tutucu şekillerini inceleme
`theme.color.onNeutralContainer`	İnceleme tarihi, yükleme hatası
`theme.color.positiveContainer`	EV şarj noktası rozeti
`theme.color.onPositiveContainer`	Mevcut EV şarj cihazı rozeti içeriği
`theme.color.positive`	"Şu anda açık" etiketini yerleştirme
`theme.color.negative`	Yerlere "Kapalı" etiketi ekleme
`theme.color.info`	Tekerlekli sandalyeye uygun giriş simgesi
`theme.measurement.borderWidthButton`	Haritalar'da aç ve Tamam düğmeleri

Tipografi (Typography)
`theme.font.bodySmall`	Yer bilgileri
`theme.font.bodyMedium`	Yer bilgileri, iletişim kutusu içeriği
`theme.font.labelMedium`	Rozet içeriği
`theme.font.labelLarge`	Düğme içeriği
`theme.font.headlineMedium`	İletişim kutusu başlıkları
`theme.font.displaySmall`	Yer adı
`theme.font.titleSmall`	Yer adı

Boşluk
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

Ölçüm
`borderWidth`	Kapsayıcı
`theme.measurement.borderWidthButton`

Şekil
`theme.shape.cornerRadius`	Kapsayıcı
`theme.shape.cornerRadiusButton`	Haritalar'da aç ve Tamam düğmeleri (yuvarlak simge düğmesi hariç)
`theme.shape.cornerRadiusThumbnail`	Yer küçük resmi
`theme.shape.cornerRadiusCollageOuter`	Medya kolajı
`theme.shape.cornerRadiusCard`	Yer kartı, kullanıcı yorumu kartı
`theme.shape.cornerRadiusDialog`	Google Haritalar açıklama iletişim kutusu

Google Haritalar'da Marka İlişkilendirmesi
`attribution.lightModeColor`	Açık tema Google Haritalar ilişkilendirme ve açıklama düğmesi (beyaz, gri ve siyah için numaralandırılmış değerler)
`attribution.darkModeColor`	Koyu tema Google Haritalar ilişkilendirme ve açıklama düğmesi (beyaz, gri ve siyah için numaralandırmalar)

Örnekleri Yer Ayrıntıları bileşeni örnekleri bölümünde bulabilirsiniz.

Genişlik ve yükseklik özelleştirme

Kompakt görünümler

Önerilen genişlikler:

Dikey yön: 180 piksel ile 300 piksel arasında.
Yatay yön: 180 piksel ile 500 piksel arasında.

En iyi uygulama, kompakt görünümler için yükseklik ayarlamamaktır. Bu sayede penceredeki içerik yüksekliği ayarlayabilir ve tüm bilgilerin gösterilmesini sağlayabilirsiniz.

160 pikselden küçük genişlikler doğru şekilde görüntülenmeyebilir.

Tam görüntüleme sayısı

Tam görünümler için önerilen genişlik 250 piksel ile 450 piksel arasındadır. 250 pikselden küçük bir genişlik doğru şekilde görüntülenmeyebilir.

Bileşenin yüksekliğini ayarlayabilirsiniz: Dikey yer ayrıntıları görünümü, ayrılan alan içinde dikey olarak kaydırılır.

En iyi uygulama, tam görünümler için bir yükseklik belirlemektir. Bu sayede penceredeki içerik düzgün şekilde kaydırılabilir.

İlişkilendirme renkleri

Google Haritalar Hizmet Şartları, Google Haritalar ilişkilendirmesi için üç marka renginden birini kullanmanızı zorunlu kılar. Özelleştirme değişiklikleri yapıldığında bu ilişkilendirme görünür ve erişilebilir olmalıdır.

Açık ve koyu temalar için bağımsız olarak ayarlanabilen 3 marka rengi seçeneği sunuyoruz:

Açık tema: attributionColorLight beyaz, gri ve siyah için numaralandırılmış değerlerle.
Koyu tema: attributionColorDark beyaz, gri ve siyah için numaralandırılmış değerlerle.

Yer ayrıntıları bileşeni örnekleri

Dikey düzende tam görünüm oluşturma

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // 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))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Yatay düzende kompakt görünüm oluşturma

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    // Query for loading the place details widget.
    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme = PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // 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))")
      }
    }
    PlaceDetailsCompactView(
      orientation: .horizontal, query: $query,
      configuration: configuration,
      placeDetailsCallback: placeDetailsCallback
    )

Dikey düzende tam görünüm oluşturma

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: PlacesMaterialTheme = PlacesMaterialTheme()
  var selectedType: Set<PlaceDetailsContent> = PlaceDetailsCompactView.standardContent
  
  var configuration: PlaceDetailsConfiguration {
    PlaceDetailsConfiguration(
      content: selectedType,
      theme: theme)
  }
  let placeDetailsCallback: (PlaceDetailsResult) -> Void = { result in
    placeIDPickerFocused = true
    if let place = result.place {
      print("Place: \(place.description)")
    } else {
      print("Error: \(String(describing: result.error))")
    }
  }
  GooglePlacesSwift.PlaceDetailsView(
    query: $query,
    configuration: configuration,
    placeDetailsCallback: placeDetailsCallback
  )

Stil özelliklerini özelleştirme

Bu örnekte, tam veya kompakt görünümün varsayılan stil özelliklerinin nasıl özelleştirileceği gösterilmektedir.

Swift

  // Same for compact and full
func makeTemplateTheme(colorScheme: ColorScheme) -> PlacesMaterialTheme {
  var theme = PlacesMaterialTheme()
  var color = PlacesMaterialColor()
  color.surface = (colorScheme == .dark ? .blue : .gray)
  color.buttonBorder = (colorScheme == .dark ? .pink : .orange)
  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.measurement.borderWidthButton = 1
  theme.color = color
  theme.shape = shape
  theme.font = font
  theme.attribution = attribution
  return theme
}

Belirli içerikleri görüntüleme

Bu örnek, önceki örnekte oluşturulan temayı kullanarak yalnızca medya, adres, puan ve türü gösteren kompakt bir görünüm oluşturur.

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }