প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

স্থান অনুসন্ধান উপাদান

Places UI Kit-এর Place Search কম্পোনেন্টটি কোনো স্থান অনুসন্ধানের ফলাফল একটি তালিকায় প্রদর্শন করে।

প্লেসেস UI কিট প্লেস সার্চ কম্পোনেন্ট

আপনি স্থান অনুসন্ধান তালিকাটি কাস্টমাইজ করতে পারেন। আপনি নির্দিষ্ট করতে পারেন:

  • প্রদর্শনের জন্য বিষয়বস্তু
  • উল্লম্ব বিন্যাসে মিডিয়ার আকার
  • পাঠ্য সংক্ষিপ্তকরণ
  • অভিমুখীকরণ
  • আপনার ব্র্যান্ড এবং অ্যাপের ডিজাইন ল্যাঙ্গুয়েজের সাথে সামঞ্জস্যপূর্ণ থিম ওভাররাইড।
  • আরোপের অবস্থান
  • একটি স্থান নির্বাচনযোগ্য কিনা

আপনি SearchByTextRequest অথবা SearchNearbyRequest সম্পাদন করার জন্য অনুরোধটি কাস্টমাইজও করতে পারেন।

বিলিং

প্রতিবার 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 : ফ্র্যাগমেন্টের উল্লম্ব দিকে ছবির আকার। ডিফল্ট মান হলো ছোট। এটি content-এ নির্দিষ্ট করা হয়।
  • 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
)
        

থিমটি কাস্টমাইজ করুন

আপনি এমন একটি থিম নির্দিষ্ট করতে পারেন যা যেকোনো ডিফল্ট স্টাইল অ্যাট্রিবিউটকে ওভাররাইড করবে। ডিফল্ট থিমটি হলো PlacesMaterialTheme

থিমিং সম্পর্কে আরও তথ্যের জন্য কাস্টম স্টাইলিং বিভাগটি দেখুন।

Places UI Kit ডিফল্টরূপে একটি ডার্ক থিম প্রদান করে, তাই আপনার ডার্ক এবং লাইট উভয় থিমই কাস্টমাইজ করার প্রয়োজন হতে পারে। ডার্ক থিম কাস্টমাইজ করতে, আপনার কাস্টম থিমে .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 UI Kit ডিফল্টরূপে একটি ডার্ক থিম প্রদান করে, তাই আপনার ডার্ক এবং লাইট উভয় থিমই কাস্টমাইজ করার প্রয়োজন হতে পারে। ডার্ক থিম কাস্টমাইজ করতে, আপনার কাস্টম থিমে .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()
    }
}