הרכיב 'פרטי המקום'

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

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

אפשר להשתמש ברכיב 'פרטי המקום' בנפרד או בשילוב עם שירותים וממשקי API אחרים של הפלטפורמה של מפות Google. הרכיב מקבל מזהה מקום או קואורדינטות של קו רוחב/קו גובה, ומחזיר מידע מעוצב של פרטי המקום.

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

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

חיוב

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

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

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

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

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

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

Swift

      
  // 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: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @State var query: PlaceDetailsQuery = PlaceDetailsQuery(
    identifier: .placeID("ChIJT7FdmYiAhYAROFOvrIxRJDU"))
  
  var body: some View {
    PlaceDetailsCompactView(
      orientation: .vertical, query: $query,
      contentType: [.media(), .address(), .rating(),
                    .type(), .price(), .accessibleEntranceIcon(), .openNowStatus()], theme: theme,
      placeDetailsCallback: placeDetailsCallback, preferTruncation: false
    )
    .frame(width: 350)
  }

  

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

Swift

  // 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: PlacesMaterialTheme {
    if customTheme {
      var theme = PlacesMaterialTheme()
      var color = PlacesMaterialColor()
      color.surface = (colorScheme == .dark ? .blue : .gray)
      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.color = color
      theme.shape = shape
      theme.font = font
      theme.attribution = attribution
    } else {
      return PlacesMaterialTheme()
    }
  }
  @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)
  }

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

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

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

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

רוחב וגובה

בתצוגה אנכית, הרוחב המומלץ הוא בין 180 פיקסלים ל-300 פיקסלים. בתצוגה אופקית, הרוחב המומלץ הוא בין 180 פיקסלים ל-500 פיקסלים.

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

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

צבעים של שיוך (Attribution)

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

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

• עיצוב בהיר: attributionColorLight עם ערכים מוגדרים מראש (enums) לבן, אפור ושחור.
• עיצוב כהה: attributionColorDark עם ערכים מוגדרים מראש (enums) לבן, אפור ושחור.

דוגמה להתאמה אישית

הערה: אם לא מציינים התאמה אישית חזותית, הערך יישאר כערך ברירת המחדל.

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

Swift

  // 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: PlacesMaterialTheme {
      var theme = PlacesMaterialTheme()
      theme.colorSurface = (colorScheme == .dark ? .blue : .gray)
      theme.colorOutlineDecorative = (colorScheme == .dark ? .white : .black)
      theme.colorPrimary = (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.colorNegative = (colorScheme == .dark ? .white : .black)
      theme.colorInfo = (colorScheme == .dark ? .yellow : .purple)
      theme.cornerRadius = 10
      theme.bodySmall = .system(size: 11)
      theme.bodyMedium = .system(size: 12)
      theme.labelLarge = .system(size: 13)
      theme.headlineMedium = .system(size: 14)
      theme.attributionColorLightTheme = .black
      theme.attributionColorDarkTheme = .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)
  }