Gelişmiş Yer Ayrıntıları bileşeni

Yer Ayrıntıları bileşeninin Gelişmiş sürümü, Places Details Essentials ile aynı özellikleri sunar. Ayrıca, yer adının gösterilip gösterilmeyeceğini seçmenize, bileşenin işlem düğmelerini yapılandırmanıza ve gösterilen yorumlara ve medyaya arama ve filtreleme seçenekleri uygulamanıza olanak tanır.

Gelişmiş Yer Ayrıntıları yapılandırması

İleri seviye özelliklere erişmek için AdvancedPlaceDetailsView veya AdvancedPlaceDetailsCompactView kullanın.

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

AdvancedPlaceDetailsContent içindeki enum'ları kullanarak hangi içeriğin gösterileceğini belirtebilirsiniz. Yer Ayrıntıları Essentials ile aynı içeriklerin tümünü yapılandırabilir ve yer adının gösterilip gösterilmeyeceğini seçebilirsiniz.

İşlem düğmelerini yapılandırma

İşlem düğmelerini kaldırmak veya özelleştirmek için AdvancedPlaceDetailsView ya da AdvancedPlaceDetailsCompactView öğesinin .cornerActions ve .mainActions yöntemlerini kullanın.

Görsel ilişkilendirme koşulları

Özelleştirilmiş düğmelerle yer ayrıntılarının kompakt görünümü
Özelleştirilmiş düğme içeren Gelişmiş Yer Ayrıntıları kompakt görünümü

Önemli: Özel işlem düğmesinin, kullanıcı bilgilerini Google dışındaki bir üçüncü tarafla paylaşacağı durumlarda son kullanıcıları açıkça bilgilendirmeniz gerekir. Görsel ilişkilendirme koşullarını inceleyin.

Sağdaki örnekte, kullanıcı bilgilerinin "Altostrat"a gönderileceğini açıkça belirten özel bir resim gösterilmektedir.

Arama ve filtreleme seçeneklerini uygulama

Medya veya yorumlar için arama ve filtrelemeyi etkinleştirmek üzere AdvancedPlaceDetailsView veya AdvancedPlaceDetailsCompactView'nin .searchMediaOptions ve .searchReviewOptions yöntemlerini kullanın.

Özel içerik alanları oluşturma

Özel içerik alanı yerleşimi seçenekleri

Özel içerik alanları, kendi içeriğinizi (ör. yapay zeka tarafından oluşturulan özetler, seyahat planı zaman damgaları veya özel rozetler) doğrudan önceden tanımlanmış düzen bölgelerine eklemenize olanak tanır.

Özel içerik eklemek için AdvancedPlaceDetailsCompactView sınıfının .placeDetailsCompactContentSlot yöntemini kullanın. Kullanılabilir konumlar .basicSectionTop ve .basicSectionBottom.

İçerik alanları için ilişkilendirme koşulları ve içerik önerileri

Özel içerik alanı yerleştirildiğinde açıklama otomatik olarak güncellenerek hangi içeriğin Google tarafından, hangi içeriğin üçüncü taraflarca sağlandığı netleştirilir.

Yapılması gerekenler

Bilgilerin kaynağıyla ilgili belirsizlikleri önlemek için Google Yer ayrıntıları ile özel içerik arasında net bir görsel hiyerarşi sağlayın.

Bilgi kaynağıyla ilgili belirsizliği önleme

Yapılması gerekenler

Kullanıcılarınızın anlık hedeflerine göre uyarlanmış, yerelleştirilmiş ve yüksek değere sahip analizleri göz önünde bulundurun. Gerçek zamanlı rezervasyon aralıkları veya mevcut müsaitlik durumu gibi özel içerikler, kullanıcıların daha hızlı ve bilinçli kararlar almasına yardımcı olur.

Yüksek değerli analizler sunma

Yapılmaması gerekenler

Google tarafından sağlanan içeriği gizlemiş olsanız bile puanlar, yorumlar veya çalışma saatleri gibi mevcut Google yer ayrıntılarını kopyalamayın. Bu durum, kullanıcıların içeriğin kaynağı ve Google'dan mı yoksa üçüncü bir taraftan mı geldiği konusunda kafasını karıştırabilir.

Mevcut Google yer ayrıntılarını kopyalamayın.

Yapılmaması gerekenler

Resmi Google onaylarıyla karıştırılabilecek, kaynağı belirtilmemiş iddialar veya rozetler (ör. "En iyi öneri!") göstermeyin. Özel içeriklerde kaynağın açıkça belirtilmesi gerekir.

Atıfta bulunulmayan iddialar veya rozetler göstermeyin.

Yapılmaması gerekenler

Özel yer kapsayıcılarına reklam, pazarlama metni, promosyon indirimleri veya abonelik istemleri eklemeyin.

Reklam, pazarlama metni, promosyon indirimi veya abonelik istemi eklemeyin.

Gelişmiş Yer Ayrıntıları örnekleri

Yer adını atlama

Yer adını atlamak için AdvancedPlaceDetailsConfiguration öğesinin content parametresine .name değerini eklemeyin.

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  // Query for loading the place details component.
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  @State private var favoritePlaces: Set<String> = []

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content:[.address()],
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
  }
}

İşlem düğmelerini kaldırma

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: AdvancedPlaceDetailsView.allContent,
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
    .mainActions{ _ in
      return []
    }
  }
}

Özel ve önceden tanımlanmış işlemler ekleme

Bu örnekte, önceden tanımlanmış Haritalar'da aç işleminin yanı sıra kullanıcının bir yeri favorilere eklemesi veya favorilerden kaldırması için bir seçenek eklenir.

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  
  @State var favoritePlaces: Set<String> = []

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: AdvancedPlaceDetailsView.allContent,
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { result in
        if let place = result.place {
          print("Place: \(place.description)")
        } else {
          print("Error: \(String(describing: result.error))")
        }
      }
    )
    .mainActions{ place in
      var actions: [MainPlaceActionElement] = []
      let placeID = place.placeID!
      if self.favoritePlaces.contains(placeID) {
        actions.append(
          .action(
            MainPlaceAction(
              image: Image(systemName: "heart.fill"),
              label: "Unfavorite"
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      } else {
        actions.append(
          .action(
            MainPlaceAction(
              image: Image(systemName: "heart"),
              label: "Favorite"
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      }
      actions.append(.actionId(.openMap(style: .primary)))
      return actions
    }
    .cornerActions { place in
      var actions: [CornerPlaceActionElement] = []
      let placeID = place.placeID!
      if self.favoritePlaces.contains(placeID) {
        actions.append(
          .action(
            CornerPlaceAction(
              image: Image(systemName: "heart.fill"),
              accessibilityLabel: "Unfavorite",
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      } else {
        actions.append(
          .action(
            CornerPlaceAction(
              image: Image(systemName: "heart"),
              accessibilityLabel: "Favorite",
            ) { _ in self.toggleFavorite(placeID) }
          )
        )
      }
      actions.append(.actionId(.openMap(style: .primary)))
      return actions
    }
  }

  func toggleFavorite(_ placeID: String) {
    if favoritePlaces.contains(placeID) {
      favoritePlaces.remove(placeID)
    } else {
      favoritePlaces.insert(placeID)
    }
  }
}

Yorumları ve medyayı filtreleme

Bu kod örneğinde yalnızca "kahve"den bahseden medya ve yorumlar gösterilmektedir.

Swift

struct DemoView: View {
  static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID(peetsCoffeePlaceID)
  )
  let searchMediaOptions = SearchMediaOptions(query: "coffee")
  let searchReviewsOptions = SearchReviewsOptions(query: "coffee")

  var body: some View {
    AdvancedPlaceDetailsView(
      query: $query,
      configuration: AdvancedPlaceDetailsConfiguration(
        content: [.media(), .reviews()],
        theme: PlacesMaterialTheme()
      ),
      placeDetailsCallback: { _ in }
    )
    .searchMediaOptions(searchMediaOptions) { results in
      guard let result = results.first else { return }
      switch result {
      case .success(let summary):
        print("Summary: \(summary)")
      case .failure(let error):
        print("Error: \(error)")
      }
    }
    .searchReviewsOptions(searchReviewsOptions) { results in
      guard let result = results.first else { return }
      switch result {
      case .success(let summary):
        print("Summary: \(summary)")
      case .failure(let error):
        print("Error: \(error)")
      }
    }
  }
}

İçerik alanları oluşturma

Bu örnek, basicSectionTop ve basicSectionBottom alanlarına içerik ekler.

Swift

import SwiftUI
import PlacesSwift

struct ItineraryCard: View {
    static let peetsCoffeePlaceID = "ChIJT7FdmYiAhYAROFOvrIxRJDU"

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID(peetsCoffeePlaceID)
    )

    var body: some View {
      AdvancedPlaceDetailsCompactView(
        orientation: .vertical,
        query: $query,
        configuration: AdvancedPlaceDetailsCompactConfiguration(
          content: AdvancedPlaceDetailsCompactView.allContent,
          theme: PlacesMaterialTheme()
        ),
        placeDetailsCallback: { _ in }
      )
      .placeDetailsCompactContentSlot(position: .basicSectionTop) { place in
        Text("Day 2 • 2:30 PM")
          .font(.caption)
          .fontWeight(.bold)
          .foregroundColor(.accentColor)
      }
      .placeDetailsCompactContentSlot(position: .basicSectionBottom) { place in
        VStack(alignment: .leading, spacing: 4) {
          Text("AI Notes")
            .font(.caption)
            .bold()
          Text("Great quiet atmosphere for morning meetings. Famous for house-roasted pour-overs.")
            .font(.footnote)
            .foregroundColor(.secondary)
        }
        .padding(8)
        .background(Color(.systemGray6))
        .cornerRadius(8)
      }
    }
}