اختيار النظام الأساسي: Android iOS JavaScript

مكوِّن "تفاصيل المكان"

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

المكوّن المضغوط لتفاصيل المكان

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

يمكن تخصيص مظهر مكوِّن "تفاصيل المكان" بالكامل، ما يتيح لك تخصيص الخطوط والألوان ونصف قطر الزوايا ليناسب حالة الاستخدام وإرشادات علامتك التجارية المرئية. يمكنك تخصيص مظهر تفاصيل المكان من خلال تقديم قيم PlacesMaterialTheme مخصّصة. يمكنك أيضًا تخصيص حقول تفاصيل المكان التي يتم تضمينها من خلال تحديد قائمة بإدخالات PlaceDetailsCompactView، يرتبط كل منها بمعلومة معروضة عن المكان.

أشكال التنسيق

يتيح مكوِّن "تفاصيل المكان" شكلَين رئيسيَين للتنسيق:

  • مكثّف: تنسيق لمعاينة المعلومات الرئيسية
  • كامل: تنسيق شامل يعرض جميع تفاصيل المكان المتاحة

يمكن عرض التنسيق المكثّف في الاتجاه العمودي أو الأفقي. يتيح لك ذلك دمج المكوِّن في تنسيقات تصميم مختلفة وأحجام شاشة متنوعة. لا يمكن عرض التنسيق الكامل إلا عموديًا.

التنسيقات الأفقية والعمودية
التنسيقان الأفقي والعمودي

يمنحك مكوِّن "تفاصيل المكان" تحكّمًا دقيقًا في المحتوى المعروض في المكوِّن. يمكن عرض كل عنصر (مثل الصور والمراجعات ومعلومات الاتصال) أو إخفاؤه بشكلٍ فردي، ما يتيح تخصيص مظهر المكوّنات وكثافة المعلومات بدقة.

خيارات المحتوى الخاص بتفاصيل المكان
خيارات عرض المحتوى

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

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

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

يوفّر العرض الكامل لتفاصيل المكان (PlaceDetailsView) مساحة أكبر لعرض معلومات تفاصيل المكان، ويتيح لك عرض المزيد من أنواع المعلومات.

خيارات عرض المحتوى

يمكنك تحديد المحتوى الذي تريد عرضه باستخدام تعدادات PlaceDetailsCompactContent أو PlaceDetailsContent.

العرض المكثّف العرض الكامل
  • صورة المكان
  • تفعيل Lightbox لتكبير الصور على الشاشة الكاملة
  • عنوان المكان
  • التقييم وعدد التقييمات
  • نوع المكان
  • السعر
  • معلومات عن المدخل المناسب
  • الحالة "مفتوح الآن"
  • صور مجمّعة للمكان
  • عنوان المكان
  • التقييم وعدد التقييمات
  • نوع المكان
  • السعر
  • معلومات حول إمكانية الوصول
  • الحالة "مفتوح الآن"
  • ساعات العمل
  • الملخّص التحريري
  • الموقع الإلكتروني
  • رقم الهاتف
  • المراجعات المعروضة في علامة تبويب مخصّصة
  • رمز Plus Codes
  • قائمة الميزات المعروضة في علامة تبويب مخصّصة
  • الميزات البارزة الخاصة بالنوع، مثل أسعار الوقود لمحطات الوقود

الفوترة

عند استخدام حزمة أدوات واجهة المستخدم لتفاصيل المكان، يتم تحصيل رسوم منك في كل مرة يتم فيها استدعاء طريقة PlaceDetailsQuery. إذا حمّلت المكان نفسه عدة مرات، يتم تحصيل رسوم منك مقابل كل طلب.

إضافة تفاصيل المكان إلى تطبيقك

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

يمكنك اختيار تحميل مكوِّن "تفاصيل المكان" باستخدام رقم تعريف المكان أو اسم مورد أو إحداثيات خط العرض/خط الطول. يمكنك اختيار أي طريقة أو طرق متعددة. اضبط identifier في البنية PlaceDetailsQuery على .placeID أو .resourceName أو .coordinate.

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

يمكنك الاطّلاع على أمثلة في قسم أمثلة على مكوِّن "تفاصيل المكان".

تخصيص المظهر المرئي

التصميم المخصّص

يمكنك تخصيص الألوان وأسلوب الخط والمسافات والحدود والزوايا لمكوِّن "تفاصيل المكان".

توفر حزمة أدوات "خرائط Google" الجاهزة للأماكن أسلوب تصميم للتخصيص المرئي يستند إلى حد كبير إلى التصميم المتعدد الأبعاد (مع بعض التعديلات الخاصة بخرائط Google). يمكنك الاطّلاع على مرجع التصميم المتعدد الأبعاد للألوان Color وTypography. يتوافق النمط تلقائيًا مع لغة التصميم المرئي في "خرائط Google".

توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرَين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا لـ .dark وattribution.darkModeColor إلى المظهر المخصّص.

يمكنك الاطّلاع على قسم التصميم المخصّص لمزيد من المعلومات عن التصميم.

تخصيص العرض والارتفاع

العروض المكثّفة

العروض المقترَحة:

  • الاتجاه العمودي: بين 180 بكسل و300 بكسل
  • الاتجاه الأفقي: بين 180 بكسل و500 بكسل

من أفضل الممارسات عدم ضبط ارتفاع العروض المكثّفة. سيسمح ذلك للمحتوى في النافذة بضبط الارتفاع، ما يتيح عرض جميع المعلومات.

قد لا يتم عرض العروض التي يقل عرضها عن 160 بكسل بشكلٍ صحيح.

العروض الكاملة

بالنسبة إلى العروض الكاملة، يتراوح العرض المقترَح بين 250 بكسل و450 بكسل. قد لا يتم عرض العروض التي يقل عرضها عن 250 بكسل بشكلٍ صحيح.

يمكنك ضبط ارتفاع المكوِّن: سيتم التمرير عموديًا في العرض العمودي لتفاصيل المكان ضمن المساحة المخصّصة.

من أفضل الممارسات ضبط ارتفاع العروض الكاملة. سيسمح ذلك للمحتوى في النافذة بالتمرير بشكلٍ صحيح.

أمثلة على مكوِّن "تفاصيل المكان"

إنشاء عرض كامل بتنسيق عمودي

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

إنشاء عرض مكثّف بتنسيق أفقي

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

إنشاء عرض كامل بتنسيق عمودي

Swift

  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  var theme: 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
  )

تخصيص سمات النمط

يوضِّح هذا المثال كيفية تخصيص سمات النمط التلقائية لعرض كامل أو مكثّف.

توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرَين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا لـ .dark وattribution.darkModeColor إلى المظهر المخصّص.

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
}

عرض محتوى معيّن

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

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