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

عنصر «جستجوی جاها»

عنصر «جستجوی مکان» در «کیت میانای کاربر جاها» نتایج جستجوی مکان را در فهرستی ارائه می‌کند.

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

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

همچنین می‌توانید درخواست را سفارشی‌سازی کنید تا 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
      )
    )
  )
    

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

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

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

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

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

مثال‌ها

افزودن عنصر «جستجوی مکان»

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

سفارشی‌سازی کردن زمینه

«کیت واسط کاربر مکان‌ها» به‌طور پیش‌فرض زمینه تیره ارائه می‌دهد، بنابراین ممکن است لازم باشد زمینه تیره و روشن را سفارشی‌سازی کنید. برای سفارشی‌سازی زمینه تیره، مقادیر .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()
    }
}