প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

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

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

এছাড়াও, কম্পোনেন্ট লোড হলে, কোনও জায়গা বেছে নেওয়া হলে অথবা কম্পোনেন্ট লোড করার সময় কোনও সমস্যা হলে, আপনি ঐচ্ছিকভাবে কলব্যাক পাবেন।

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: প্রতিটি স্থান সম্পর্কিত বিবরণের ভিউয়ের টেক্সট ছোট করে দেখানো হবে কিনা। ডিফল্ট মান হল false.
• theme: আপনার কাস্টম থিম যা PlacesMaterialTheme থেকে ইনহেরিট করা হয়েছে। থিম প্রয়োগ করা সম্পর্কে আরও জানুন।
• attributionPosition: কম্পোনেন্টের উপরে বা নিচে Google Maps অ্যাট্রিবিউশন দেখানো হবে কিনা। ডিফল্ট হল .top.
• selectable: তালিকার প্রতিটি জায়গা বেছে নেওয়ার উপযুক্ত কিনা। এটি বেছে নেওয়ার মতো হলে, কোনও জায়গা বেছে নেওয়ার পরে onPlaceSelected ক্লোজার কল করা হবে। ডিফল্ট মান হল 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.

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

Places UI কিটে ডিফল্ট হিসেবে ডার্ক থিম দেওয়া থাকে, তাই আপনাকে ডার্ক ও লাইট থিম, দুটিই কাস্টমাইজ করতে হতে পারে। ডার্ক থিম কাস্টমাইজ করতে, আপনার কাস্টম থিমে .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)")
    }
  }
}
    

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

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