پلتفرم را انتخاب کنید: Android iOS JavaScript

جزء جستجوی مکان

مؤلفه جستجوی مکان در کیت UI مکان ها، نتایج جستجوی مکان را در یک لیست ارائه می کند.

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

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

همچنین می‌توانید درخواست را سفارشی کنید تا Search by text request یا Search Nearby request انجام دهد.

صورتحساب

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

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

نکته: نمونه کامل را ببینید .

ویجت جستجوی مکان را با استفاده از 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 : اینکه آیا متن هر نمای جزئیات مکان کوتاه شود. پیش فرض نادرست است.
• theme : طرح زمینه سفارشی شما که از PlacesMaterialTheme به ارث می رسد. درباره قالب بندی بیشتر بدانید.
• attributionPosition : اینکه آیا انتساب Google Maps در بالا یا پایین جزء نشان داده شود. پیش فرض .top است.
• selectable : آیا هر مکان در لیست قابل انتخاب است یا خیر. اگر قابل انتخاب باشد، بسته شدن onPlaceSelected پس از انتخاب مکان فراخوانی می شود. پیش فرض نادرست است.

پیکربندی سفارشی سازی خود را به 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
)
        

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

می توانید موضوعی را تعیین کنید که هر یک از ویژگی های سبک پیش فرض را لغو کند. پیش فرض PlacesMaterialTheme است. برای اطلاعات بیشتر در مورد موضوع، به مستندات جزء جزئیات مکان مراجعه کنید.

سویفت

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

مثال

سویفت

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