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

רכיב Place Details

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

רכיב קומפקטי של פרטי המקום

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

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

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

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

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

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

פריסות אופקיות ואנכיות
פריסות אופקיות ואנכיות

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

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

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

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

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

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

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

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

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

חיוב

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

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

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

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

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

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

התאמה אישית של המראה החזותי

סגנון מותאם אישית

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

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

ערכת ה-UI של Places מספקת עיצוב כהה כברירת מחדל, לכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים ערכים ל-.dark ול-attribution.darkModeColor בעיצוב המותאם אישית.

מידע נוסף על סגנונות מופיע בקטע התאמה אישית של סגנונות.

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

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

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

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

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

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

צפיות מלאות

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

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

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

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

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

Swift

  var selectedType: Set<PlaceDetailsCompactContent> = PlaceDetailsCompactView.standardContent

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    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

    @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
      identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
    
    var theme: PlacesMaterialTheme()
    var configuration: PlaceDetailsConfiguration {
      PlaceDetailsConfiguration(
        content: selectedType,
        theme: theme)
    }
    
    // Callback for the place details component.
    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
  )

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

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

ערכת Places UI Kit מספקת עיצוב כהה כברירת מחדל, לכן יכול להיות שתצטרכו להתאים אישית גם את העיצוב הכהה וגם את העיצוב הבהיר. כדי להתאים אישית את העיצוב הכהה, מוסיפים ערכים ל-.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)
  }