پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

کامپوننت جستجوی مکان

کامپوننت جستجوی مکان از کیت رابط کاربری Places، نتایج جستجوی مکان را در یک لیست نمایش می‌دهد.

کیت رابط کاربری مکان‌ها، کامپوننت جستجوی مکان

شما می‌توانید لیست جستجوی مکان را سفارشی کنید. می‌توانید موارد زیر را مشخص کنید:

  • محتوایی که قرار است نمایش داده شود
  • اندازه رسانه در جهت عمودی
  • کوتاه‌سازی متن
  • جهت گیری
  • لغو تم که با برند و زبان طراحی برنامه شما مطابقت دارد
  • جایگاه انتساب
  • اینکه آیا یک مکان قابل انتخاب است یا خیر

همچنین می‌توانید درخواست را طوری تنظیم کنید که یا SearchByTextRequest یا SearchNearbyRequest را اجرا کند.

صورتحساب

هر بار که مقدار اتصال SearchByTextRequest() یا PlaceSearchViewRequest() تغییر کند، هزینه‌ای از شما دریافت می‌شود.

جستجوی مکان را به برنامه خود اضافه کنید

ویجت Place Search را با استفاده از PlaceSearchView class اضافه کنید.

سویفت

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

وقتی می‌خواهید برنامه‌تان یک جستجوی متنی یا نتیجه جستجوی نزدیک را بارگذاری کند، مقدار PlaceSearchViewRequest خود را به‌روزرسانی کنید.

سویفت

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

همچنین می‌توانید به صورت اختیاری، هنگام بارگذاری کامپوننت، انتخاب یک مکان یا هنگام بروز خطا در بارگذاری کامپوننت، فراخوانی‌های برگشتی دریافت کنید.

سویفت

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

سفارشی‌سازی کامپوننت جستجوی مکان

سفارشی سازی محتوا

شما باید مشخص کنید که کامپوننت شما کدام محتوا را نمایش خواهد داد.

این مثال، کامپوننت را برای نمایش آدرس و امتیاز مکان پیکربندی می‌کند.

سویفت

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

همچنین می‌توانید به صورت اختیاری جنبه‌های زیر از محتوایی که در کامپوننت جستجوی مکان شما نمایش داده می‌شود را سفارشی کنید:

  • content : محتوایی که در کامپوننت نمایش داده می‌شود.
  • mediaSize : اندازه عکس در جهت عمودی قطعه. مقدار پیش‌فرض کوچک است. در محتوا مشخص شده است.
  • preferTruncation : آیا متن هر نمای جزئیات مکان کوتاه شود یا خیر. پیش‌فرض false است.
  • theme : قالب سفارشی شما که از PlacesMaterialTheme ارث‌بری می‌کند. درباره قالب‌بندی بیشتر بدانید.
  • attributionPosition : مشخص می‌کند که آیا آدرس نقشه گوگل در بالا یا پایین کامپوننت نمایش داده شود یا خیر. مقدار پیش‌فرض .top است.
  • selectable : مشخص می‌کند که آیا هر مکان در لیست قابل انتخاب است یا خیر. اگر قابل انتخاب باشد، پس از انتخاب یک مکان، تابع onPlaceSelected فراخوانی می‌شود. مقدار پیش‌فرض false است.

پیکربندی سفارشی‌سازی خود را به PlaceSearchConfiguration اضافه کنید.

سویفت

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 مشخص کنید.

سویفت

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

سفارشی کردن تم

شما می‌توانید یک تم (theme) مشخص کنید که هر یک از ویژگی‌های پیش‌فرض استایل را لغو کند. پیش‌فرض PlacesMaterialTheme است.

برای اطلاعات بیشتر در مورد تم‌بندی، به بخش استایل‌بندی سفارشی مراجعه کنید.

کیت رابط کاربری Places به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، مقادیر .dark و attribution.darkModeColor را به تم سفارشی خود اضافه کنید.

مثال‌ها

کامپوننت جستجوی مکان را اضافه کنید

سویفت

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

سفارشی کردن تم

کیت رابط کاربری Places به طور پیش‌فرض یک تم تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد هر دو تم تیره و روشن را سفارشی کنید. برای سفارشی‌سازی تم تیره، مقادیر .dark و attribution.darkModeColor را به تم سفارشی خود اضافه کنید.

سویفت

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