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

רכיב Place Details

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

חיוב

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

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

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

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

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

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

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

עיצוב מותאם אישית

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

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

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

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

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

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

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

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

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

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

צפיות מלאות

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

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

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

דוגמאות לרכיב 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()
    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
  )

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

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

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