مجموعة أدوات واجهة المستخدم لميزة "تفاصيل الأماكن" (تجريبية)

العرض المكثّف لتفاصيل المكان

تتيح لك حزمة أدوات واجهة المستخدم لعرض تفاصيل الأماكن إضافة مكوّن فردي لواجهة المستخدم يعرض تفاصيل الأماكن في تطبيقك. ويمكن استخدام حزمة أدوات واجهة المستخدم بشكل مستقل أو مع خدمات وواجهات برمجة تطبيقات أخرى في "منصّة خرائط Google". تأخذ حِزمة واجهة المستخدم إما معرّف مكان أو إحداثيات خطوط الطول والعرض وتُعرِض معلومات تفاصيل المكان.

توفّر مجموعة أدوات واجهة المستخدم عرضًا مكثّفًا يمكن عرضه أفقيًا أو عموديًا. يمكنك تخصيص مظهر تفاصيل المكان من خلال تقديم قيم مخصّصة لسمة PlaceWidgetTheme. يمكنك أيضًا تخصيص حقول تفاصيل الأماكن المضمّنة من خلال تحديد قائمة بإدخالات PlaceDetailsCompactView، يتوافق كل منها مع معلومة معروضة عن المكان.

الفوترة

عند استخدام حِزمة واجهة مستخدم "تفاصيل الأماكن" لميزة "تفاصيل الأماكن"، يتم تحصيل رسوم منك مقابل كل مكان يتم تحميله باستخدام التطبيق المصغّر. في حال تحميل المكان نفسه عدة مرات، يتم تحصيل رسوم منك مقابل كل طلب.

تفعيل حِزمة واجهة مستخدِم "الأماكن"

قبل استخدام حِزمة واجهة مستخدم "الأماكن"، عليك إجراء ما يلي:

أمثلة على مجموعة أدوات واجهة المستخدم في "تفاصيل المكان"

التطبيق المصغّر "تفاصيل المكان" هو عنصر عرض في Swift UI. يمكنك تخصيص شكل معلومات تفاصيل المكان وأسلوبها لتلبية احتياجاتك ومطابقة مظهر تطبيقك.

يمكنك تحديد الاتجاه (أفقي أو عمودي) وعناصر الاستبدال في المظهر والمحتوى. خيارات المحتوى هي الوسائط والعنوان والتقييم والسعر والنوع والمدخل المخصّص للوصول بدون عوائق ورابط الخرائط ورابط الاتجاهات. [الاطّلاع على مثال على التخصيص]().

يكون الوضع التلقائي عموديًا. إذا كنت تريد تنسيقًا أفقيًا، حدِّد orientation: .horizontal في PlaceDetailsCompactView.

ينشئ هذا المثال عرضًا مكثّفًا بتنسيق عمودي.

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

  

ينشئ هذا العيّنة عرضًا مكثّفًا بتنسيق أفقي.

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

مثال على التخصيص

يوضّح هذا المثال كيفية تخصيص سمات التصميم التلقائية.

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