דף זה תורגם על ידי Cloud Translation API.

בחירת פלטפורמה: Android iOS JavaScript

רכיב Place Details

רכיב פרטי המקום ב-Places UI Kit מאפשר להוסיף רכיב UI נפרד שמציג פרטים על מקום באפליקציה. אפשר להתאים אישית את הרכיב הזה.

אפשר להשתמש ברכיב Place Details (פרטי מקום) באופן עצמאי או בשילוב עם ממשקי API ושירותים אחרים של Google Maps Platform. הרכיב מקבל מזהה מקום, שם משאב או קואורדינטות של קו רוחב וקו אורך, ומחזיר מידע מעובד של פרטי מקום.

אפשר להחיל ערכות עיצוב על הרכיב 'פרטי מקום', וכך להתאים אישית את הגופנים, הצבעים ורדיוס הפינות בהתאם לתרחיש השימוש ולהנחיות המיתוג החזותי. אפשר להתאים אישית את המראה של פרטי המקום על ידי הגדרת ערכים מותאמים אישית של PlacesMaterialTheme. אפשר גם להתאים אישית את השדות של פרטי המקום שייכללו, על ידי ציון רשימה של PlaceDetailsCompactView ערכים, שכל אחד מהם תואם לפריט מידע שמוצג על המקום.

גרסאות שונות של פריסות

הרכיב Place Details תומך בשני סוגים עיקריים של פריסות:

קומפקטית: פריסה לתצוגה מקדימה של מידע חשוב.
מלא: פריסה מקיפה שבה מוצגים כל הפרטים הזמינים על המקום.

אפשר להציג את הפריסה הקומפקטית במצב אנכי או אופקי. כך אפשר לשלב את הרכיב בפריסות עיצוב שונות ובמסכים בגדלים שונים. אפשר להציג את הפריסה המלאה רק בצורה אנכית.

רכיב פרטי המקום מאפשר לכם שליטה מדויקת בתוכן שמוצג ברכיב. אפשר להציג או להסתיר כל רכיב בנפרד (כמו תמונות, ביקורות ופרטים ליצירת קשר), וכך להתאים במדויק את המראה של הרכיבים ואת צפיפות המידע.

אפשרויות התוכן של 'פרטי המקום' — אפשרויות תצוגת תוכן

תצוגה קומפקטית של פרטי המקום

תצוגה קומפקטית של פרטי המקום (PlaceDetailsCompactView) מציגה פרטים של מקום נבחר תוך שימוש בשטח מינימלי. המידע הזה יכול להיות שימושי בחלון מידע שמציג מקום במפה, בחוויית שימוש ברשתות חברתיות כמו שיתוף מיקום בצ'אט, כהצעה לבחירת המיקום הנוכחי או במאמר חדשותי כדי להפנות למקום במפות Google.

תצוגה מלאה של פרטי המקום

בתצוגה המלאה של פרטי המקום (PlaceDetailsView) יש יותר מקום להצגת פרטי המקום, ואפשר להציג בה יותר סוגים של מידע.

אפשרויות תצוגה של תוכן

אתם יכולים לציין איזה תוכן יוצג באמצעות הערכים המנויים ב-PlaceDetailsCompactContent או ב-PlaceDetailsContent.

תצוגה קומפקטית	תצוגה מלאה
תמונה של המקום כתובת המקום דירוג ומספר הדירוגים סוג המקום מחיר מידע על כניסה נגישה הסטטוס 'פתוח עכשיו'	קולאז' תמונות של המקום כתובת המקום דירוג ומספר הדירוגים סוג המקום מחיר מידע על נגישות הסטטוס 'פתוח עכשיו' שעות פתיחה תקציר המערכת אתר מספר טלפון ביקורות שמוצגות בכרטיסייה ייעודית Plus Code רשימת תכונות, מוצגת בכרטיסייה ייעודית הדגשים הספציפיים לסוג העסק, כמו מחירי הדלק בתחנות דלק

תצוגה קומפקטית

תצוגה מלאה

תמונה של המקום
כתובת המקום
דירוג ומספר הדירוגים
סוג המקום
מחיר
מידע על כניסה נגישה
הסטטוס 'פתוח עכשיו'

קולאז' תמונות של המקום
כתובת המקום
דירוג ומספר הדירוגים
סוג המקום
מחיר
מידע על נגישות
הסטטוס 'פתוח עכשיו'
שעות פתיחה
תקציר המערכת
אתר
מספר טלפון
ביקורות שמוצגות בכרטיסייה ייעודית
Plus Code
רשימת תכונות, מוצגת בכרטיסייה ייעודית
הדגשים הספציפיים לסוג העסק, כמו מחירי הדלק בתחנות דלק

חיוב

כשמשתמשים בערכת ה-UI של פרטי מקום, מתבצע חיוב בכל פעם שמפעילים את השיטה PlaceDetailsQuery. אם תטענו את אותו מקום כמה פעמים, תחויבו על כל בקשה.

הוספת פרטי מקום לאפליקציה

הרכיב Place Details הוא תצוגה של Swift UI. אתם יכולים להתאים אישית את המראה והסגנון של פרטי המקום כך שיתאימו לצרכים שלכם ולמראה של האפליקציה. מידע נוסף על התאמה אישית

אפשר לטעון את רכיב פרטי המקום באמצעות מזהה מקום, שם משאב או קואורדינטות של קו רוחב וקו אורך. אפשר לבחור שיטה אחת או כמה שיטות. מגדירים את identifier במבנה PlaceDetailsQuery לערך .placeID, ‏.resourceName או .coordinate.

כברירת מחדל, התצוגה הקומפקטית מוצגת לאורך. אם רוצים פריסה אופקית, צריך לציין orientation: .horizontal ב-PlaceDetailsCompactView. אפשר גם לציין את השדה orientation: .vertical כדי להבהיר את הפעולה. אפשר להציג את התצוגה המלאה רק בצורה אנכית.

דוגמאות מפורטות בקטע דוגמאות לרכיב Place Details.

התאמה אישית של המראה

התאמה אישית של פרטי המקום — דוגמאות להתאמה אישית ויזואלית

ערכת ה-UI של Places מציעה גישה של מערכת עיצוב להתאמה אישית של רכיבים חזותיים, שמבוססת בערך על Material Design (עם כמה שינויים ספציפיים למפות Google). אפשר לעיין בהפניה של Material Design בנושא צבע וטיפוגרפיה. כברירת מחדל, הסגנון תואם לשפת העיצוב החזותי של מפות Google.

העיצוב והסגנון של הרכיב מותאמים אישית באמצעות המבנים placesMaterialColor,‏ placesMaterialFont,‏ placesMaterialShape ו-placesMaterialTheme.

אפשר להתאים אישית את הסגנונות הבאים:

התאמה אישית של הצבע והטיפוגרפיה של תיבת הדו-שיח

מאפיין עיצוב	שימוש
צבע
`theme.color.surface`	רקע של מכל ושל תיבת דו-שיח
`theme.color.outlineDecorative`	גבול המאגר
`theme.color.primary`	קישורים, אינדיקטור טעינה, סמלי סקירה כללית
`theme.color.onSurface`	כותרות, תוכן תיבת דו-שיח
`theme.color.onSurfaceVariant`	מידע על מקום
`theme.color.secondaryContainer`	רקע כפתור
`theme.color.onSecondaryContainer`	טקסט וסמל של כפתור
`theme.color.neutralContainer`	בדיקת תג התאריך, טעינה של צורות placeholder
`theme.color.onNeutralContainer`	תאריך הביקורת, שגיאה בטעינה
`theme.color.positiveContainer`	תג עמדת טעינה לרכב חשמלי (EV)
`theme.color.onPositiveContainer`	תוכן התג 'עמדת טעינה לרכב חשמלי (EV)'
`theme.color.positive`	התווית 'פתוח' במקום
`theme.color.negative`	התווית 'סגור' נוספה למקום
`theme.color.info`	סמל של כניסה נגישה
`theme.measurement.borderWidthButton`	לחצנים לפתיחה במפות ולאישור

טיפוגרפיה
`theme.font.bodySmall`	מידע על מקום
`theme.font.bodyMedium`	פרטי המקום, תוכן תיבת הדו-שיח
`theme.font.labelMedium`	תוכן התג
`theme.font.labelLarge`	תוכן הכפתור
`theme.font.headlineMedium`	כותרות של תיבות דו-שיח
`theme.font.displaySmall`	שם המקום
`theme.font.titleSmall`	שם המקום

ריווח
`theme.measurement.spacingExtraSmall`
`theme.measurement.spacingSmall`
`theme.measurement.spacingMedium`
`theme.measurement.spacinglarge`
`theme.measurement.spacingExtraLarge`
`theme.measurement.spacingTwoExtraLarge`

מדידה
`borderWidth`	מאגר
`theme.measurement.borderWidthButton`

צורה
`theme.shape.cornerRadius`	מאגר
`theme.shape.cornerRadiusButton`	לחצני 'פתיחה במפות' ו'אישור' (לא כולל לחצן סמל עגול)
`theme.shape.cornerRadiusThumbnail`	מיקום התמונה הממוזערת
`theme.shape.cornerRadiusCollageOuter`	קולאז' מדיה
`theme.shape.cornerRadiusCard`	כרטיס מקום, כרטיס ביקורת משתמש
`theme.shape.cornerRadiusDialog`	תיבת חשיפה במפות Google

שיוך מותג במפות Google
`attribution.lightModeColor`	לחצן שיוך וגילוי נאות של מפות Google בעיצוב בהיר (ערכי enum ללבן, אפור ושחור)
`attribution.darkModeColor`	כפתור שיוך וגילוי נאות במפות Google בעיצוב כהה (מספרי enum לצבעים לבן, אפור ושחור)

דוגמאות מפורטות בקטע דוגמאות לרכיב Place Details.

התאמה אישית של הרוחב והגובה

תצוגות קומפקטיות

רוחבים מומלצים:

אוריינטציה אנכית: בין 180 פיקסלים ל-300 פיקסלים.
אוריינטציה אופקית: בין 180 פיקסלים ל-500 פיקסלים.

השיטה המומלצת היא לא להגדיר גובה לתצוגות קומפקטיות. כך התוכן בחלון יוכל להגדיר את הגובה, וכל המידע יוצג.

יכול להיות שרוחב קטן מ-160 פיקסלים לא יוצג בצורה תקינה.

צפיות מלאות

לתצוגות מלאות, הרוחב המומלץ הוא בין 250 ל-450 פיקסלים. יכול להיות שרוחב קטן מ-250 פיקסלים לא יוצג בצורה תקינה.

אפשר להגדיר את הגובה של הרכיב: התצוגה האנכית של פרטי המקום תגולל אנכית בתוך השטח שהוקצה לה.

השיטה המומלצת היא להגדיר גובה לתצוגות מלאות. כך התוכן בחלון יוכל לגלול בצורה תקינה.

צבעי שיוך

ייחוס למקורות תנועה — שיוך (Attribution)

התנאים וההגבלות של מפות Google מחייבים שימוש באחד משלושת צבעי המותג לציון השיוך למפות Google. הייחוס הזה צריך להיות גלוי ונגיש כשמבצעים שינויים בהתאמה האישית.

אנחנו מציעים 3 צבעי מותג לבחירה, שאפשר להגדיר אותם בנפרד לעיצובים בהירים וכהים:

עיצוב בהיר: attributionColorLight עם ספירות ללבן, אפור ושחור.
עיצוב כהה: attributionColorDark עם ספירות (enums) לצבעים לבן, אפור ושחור.

דוגמאות לרכיב Place Details

יצירת תצוגה מלאה עם פריסה אנכית

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
    )

יצירת תצוגה קומפקטית עם פריסה אופקית

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
    )

יצירת תצוגה מלאה עם פריסה אנכית

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
  )

התאמה אישית של מאפייני הסגנון

בדוגמה הזו אפשר לראות איך להתאים אישית את מאפייני הסגנון שמוגדרים כברירת מחדל בתצוגה מלאה או בתצוגה מצומצמת.

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