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

רכיב חיפוש מקומות

רכיב חיפוש המקומות ב-Places UI Kit מעבד את התוצאות של חיפוש מקומות ברשימה.

רכיב חיפוש מקומות ב-Places UI Kit

אפשר להתאים אישית את רשימת החיפוש של מקומות. אפשר לציין:

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

אפשר גם להתאים אישית את הבקשה כדי לבצע SearchByTextRequest או SearchNearbyRequest.

חיוב

אתם מחויבים בכל פעם שמשנים את ערך הקישור SearchByTextRequest() או PlaceSearchViewRequest().

הוספת חיפוש מקומות לאפליקציה

מוסיפים את הווידג'ט 'חיפוש מקומות' באמצעות הסמל PlaceSearchView class.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)

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

Swift

// use placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request

  @State private var let placeSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
    

אפשר גם לקבל קריאות חוזרות (callback) כשהרכיב נטען, כשבוחרים מקום או כשיש שגיאה בטעינת הרכיב.

Swift

.onLoad { places in
  print("places: \(places)")
}
.onRequestError { error in
  print("error: \(error)")
}
.onPlaceSelected { place in
  print("place: \(place)")
}
    

התאמה אישית של רכיב חיפוש המקומות

התאמה אישית של תוכן

צריך לציין איזה תוכן הרכיב יציג.

בדוגמה הזו, הרכיב מוגדר להצגת הכתובת והדירוג של המקום.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating()]
)

אפשר גם להתאים אישית את ההיבטים הבאים של התוכן שמופיע ברכיב 'חיפוש מקומות':

  • content: התוכן שמוצג ברכיב.
  • mediaSize: גודל התמונה בכיוון האנכי של הפריט. ברירת המחדל היא small. מצוין בתוכן.
  • preferTruncation: האם לחתוך את הטקסט של כל תצוגת פרטי מקום. ברירת המחדל היא False.
  • theme: העיצוב המותאם אישית שלכם שמוגדר על בסיס PlacesMaterialTheme. מידע נוסף על שינוי העיצוב
  • attributionPosition: האם להציג את הקרדיט של מפות Google בחלק העליון או התחתון של הרכיב. ברירת המחדל היא ‎ .top.
  • selectable: האם אפשר לבחור כל מקום ברשימה. אם אפשר לבחור אותו, הקריאה לפונקציה onPlaceSelected closure תתבצע אחרי שייבחר מקום. ברירת המחדל היא False.

מוסיפים את הגדרת ההתאמה האישית אל PlaceSearchConfiguration.

Swift

private let configuration = PlaceSearchConfiguration(
    content: [.address, .rating, .media(size: .large)],
    preferTruncation: true, // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom, // default is top
    selectable: true // default is false
)
        

התאמה אישית של הכיוון

כברירת מחדל, הכיוון שבו יוצג השידור במסך הוא אנכי. אפשר לציין כיוון אופקי ב-PlaceSearchView.

Swift

PlaceSearchView(
      orientation: .horizontal, // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
)
        

התאמה אישית של העיצוב

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

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

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

דוגמאות

הוספת הרכיב Place Search

Swift

struct PlaceSearchDemoView: View {
  private let configuration = PlaceSearchConfiguration(
    content: [.address(), .rating(), .type(), .media(size: .large)],
    preferTruncation: true,  // default is false
    theme: PlacesMaterialTheme(),
    attributionPosition: .bottom,  // default is top
    selectable: true  // default is false
  )
  // can also do let placeSearchViewRequest = .searchNearby(...) to  configure a searchNearby request
  @State private var placeSearchViewRequest: PlaceSearchViewRequest = .searchByText(
    SearchByTextRequest(
      textQuery: "Googleplex",
      placeProperties: [.all],
      locationBias: CircularCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 0, longitude: 0),
        radius: 0
      )
    )
  )
  var body: some View {
    PlaceSearchView(
      orientation: .horizontal,  // default is vertical
      request: $placeSearchViewRequest,
      configuration: configuration
    )
    .onLoad { places in
      print("places: \(places)")
    }
    .onRequestError { error in
      print("error: \(error)")
    }
    .onPlaceSelected { place in
      print("place: \(place)")
    }
  }
}
    

התאמה אישית של העיצוב

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

Swift

@Environment(\.colorScheme) var colorScheme
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()
    }
}