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

মৌলিক স্থান স্বয়ংসম্পূর্ণ উপাদান

প্লেস UI কিটের বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদান আপনাকে একটি পৃথক UI উপাদান যোগ করতে দেয় যা একটি স্থান আইডি প্রদান করে যখন একজন ব্যবহারকারী একটি স্থান নির্বাচন করে। কম্পোনেন্ট হল একটি পূর্ণ স্ক্রীন কভার যা ব্যবহারকারীদের একটি অনুসন্ধান বার প্রদান করে একটি ক্যোয়ারী লিখতে। ব্যবহারকারীর টাইপ হিসাবে, স্বয়ংসম্পূর্ণ ফলাফলের একটি তালিকা অনুসন্ধান বারের নীচে দেখানো হবে। যখন ব্যবহারকারী একটি জায়গায় ট্যাপ করে, শুধুমাত্র স্থান আইডি সহ একটি স্থান বস্তু ডেভেলপারকে ফেরত দেওয়া হয়। এই উপাদানটি কাস্টমাইজযোগ্য।

উপাদানটি AutocompleteFilter ফিল্টার কাঠামোর মাধ্যমে ভৌগলিক সীমা এবং অন্যান্য অনুসন্ধান পরামিতি গ্রহণ করে।

প্রতিক্রিয়া শুধুমাত্র placeID ফিল্ড পপুলেট সহ একটি Place struct প্রদান করে।

বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদানটিতে নিম্নলিখিত কাস্টমাইজেশন বিকল্প রয়েছে: তালিকার ঘনত্ব এবং অবস্থান আইকনগুলি অন্তর্ভুক্ত করতে হবে কিনা। কম্পোনেন্ট কাস্টমাইজ করতে AutocompleteUICustomization কাঠামো ব্যবহার করুন।

আপনি বেসিক প্লেস স্বয়ংসম্পূর্ণ উপাদানটি স্বাধীনভাবে বা অন্যান্য Google মানচিত্র প্ল্যাটফর্ম API এবং পরিষেবাগুলির সাথে একত্রে ব্যবহার করতে পারেন৷

বিলিং

প্রতিবার কম্পোনেন্ট খোলা হলে এবং একটি প্রশ্ন করা হলে আপনাকে বিল করা হবে। সেশনের মেয়াদ শেষ না হওয়া বা তালিকা থেকে একটি স্থান নির্বাচন না করা পর্যন্ত আপনাকে সেই সেশনের জন্য আবার বিল করা হবে না।

আপনার অ্যাপে মৌলিক স্বয়ংসম্পূর্ণ উপাদান যোগ করুন

স্বয়ংসম্পূর্ণ ফিল্টার পরামিতিগুলি সেট করুন (উদাহরণস্বরূপ, যে ধরনের দেশে ফিরতে হবে, ফলাফল সীমিত করতে হবে দেশ, ফলাফলের জন্য অঞ্চল স্থানাঙ্ক এবং ব্যবহারকারীর উৎস সেট করা থাকলে দূরত্বের তথ্য) যেমন আপনি Places UI কিট ছাড়া প্লেস স্বয়ংসম্পূর্ণ (নতুন) ব্যবহার করতে চান। সম্পূর্ণ নির্দেশাবলীর জন্য স্থান স্বয়ংসম্পূর্ণ (নতুন) ডকুমেন্টেশন দেখুন এবং একটি স্বয়ংসম্পূর্ণ ফিল্টার তৈরি করতে কোডের উদাহরণ দেখুন ।

একবার আপনি আপনার স্বয়ংসম্পূর্ণ ফিল্টার তৈরি করে ফেললে, আপনি আপনার UI কাস্টমাইজেশনের সাথে একটি কাঠামো তৈরি করতে পারেন। কাস্টমাইজেশন বিকল্প এবং নির্দেশাবলী দেখুন ।

তারপর, একটি বোতাম তৈরি করুন যা আপনার কাস্টমাইজ করা মৌলিক স্বয়ংসম্পূর্ণ উপাদান চালু করবে।

সুইফট

  Button("Search for a place") {
    showWidget.toggle()
  }
  .basicPlaceAutocomplete(
    show: $showWidget
     // ...
  )

সম্পূর্ণ উদাহরণ দেখুন ।

মৌলিক স্বয়ংসম্পূর্ণ উপাদান কাস্টমাইজ করুন

বিষয়বস্তু কাস্টমাইজ করুন

তালিকার ঘনত্ব

আপনি একটি দুই-লাইন তালিকা বা একটি মাল্টিলাইন তালিকা প্রদর্শন করতে বেছে নিতে পারেন। AutocompleteUICustomization ক্লাসে AutocompleteListDensity ( .twoLine বা .multiLine ) বিকল্পগুলি ব্যবহার করুন। আপনি যদি তালিকার ঘনত্ব নির্দিষ্ট না করেন তবে উপাদানটি একটি দুই-লাইন তালিকা প্রদর্শন করবে।

অবস্থান আইকন

আপনি ফলাফল তালিকায় একটি ডিফল্ট স্থান আইকন প্রদর্শন করবেন কিনা তা চয়ন করতে পারেন৷ AutocompleteUICustomization ক্লাসে AutocompleteUIIcon ( .defaultIcon বা .noIcon ) বিকল্পগুলি ব্যবহার করুন৷

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

আপনি একটি থিম নির্দিষ্ট করতে পারেন যা যেকোনো ডিফল্ট শৈলী বৈশিষ্ট্যকে ওভাররাইড করে। আপনি আপনার স্থানের বিবরণ উপাদানের রং, টাইপোগ্রাফি, ব্যবধান, সীমানা এবং কোণগুলি কাস্টমাইজ করতে পারেন। ডিফল্ট হল PlacesMaterialTheme ।

যে কোনো থিম বৈশিষ্ট্য ওভাররাইড করা হয় না ডিফল্ট শৈলী ব্যবহার করে।

প্লেস UI কিট ডিফল্টরূপে একটি অন্ধকার থিম প্রদান করে, তাই আপনাকে অন্ধকার এবং হালকা উভয় থিম কাস্টমাইজ করতে হতে পারে। অন্ধকার থিম কাস্টমাইজ করতে, আপনার কাস্টম থিমে .dark এবং attribution.darkModeColor এর মান যোগ করুন।

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

মৌলিক স্বয়ংসম্পূর্ণ উপাদানে বিষয়বস্তু এবং থিম কাস্টমাইজেশন যোগ করুন

মৌলিক স্বয়ংসম্পূর্ণ উপাদান কাস্টমাইজ করতে AutocompleteUICustomization ক্লাস ব্যবহার করুন।

সুইফট

let uiCustomization = AutocompleteUICustomization(
    listDensity: .multiLine,
    listItemIcon: .noIcon,
    theme: PlacesMaterialTheme()
)

উদাহরণ

একটি মৌলিক স্বয়ংসম্পূর্ণ উপাদান যোগ করুন

গুরুত্বপূর্ণ: ব্যবহারকারী বোতামটি ক্লিক করলে আপনার কাস্টমাইজড উপাদানটি প্রদর্শিত হওয়ার জন্য showWidget এর প্রাথমিক মান মিথ্যাতে সেট করুন।

এই উদাহরণটি একটি বোতাম সহ একটি কাস্টম মৌলিক স্বয়ংসম্পূর্ণ উপাদান তৈরি করে। ডিফল্ট আইকন, দুই লাইনের তালিকার ঘনত্ব এবং কাস্টম থিম সেট করা হয়েছে। স্বয়ংসম্পূর্ণ ফিল্টারটি লাস ভেগাসে এবং তার কাছাকাছি অ্যাকাউন্টিং-সম্পর্কিত স্থানগুলি খুঁজে পেতে সেট করা হয়েছে৷

সুইফট

  // Note: You must provide an API key in your app entry point first.
  // A demo view of the basic place autocomplete widget.
  public struct BasicPlaceAutocompleteView: View {
    @State private var fetchedPlace: Place?
    @State private var placesError: PlacesError?
    @State private var showWidget = false
    public var body: some View {
      let types: Set<PlaceType> = [.accounting]
      let countries: Set<String> = ["US"]
      let origin = CLLocation(latitude: 36.19030535579595, longitude: -115.25397680618019)
      let coordinateRegion = RectangularCoordinateRegion(
        northEast: CLLocationCoordinate2D(
          latitude: 36.25290087640495, longitude: -115.08025549571225),
        southWest: CLLocationCoordinate2D(latitude: 36.06607422287787, longitude: -115.33431432920293)
      )
      let regionCode = "US"
      let inputOffset = 10
      let filter = AutocompleteFilter(
        types: types,
        countries: countries,
        origin: origin,
        coordinateRegionBias: coordinateRegion,
        regionCode: regionCode)
      let uiCustomization = AutocompleteUICustomization(
        listDensity: .multiLine,
        listItemIcon: .noIcon,
        theme: PlacesMaterialTheme()
      )
      VStack {
        Button("Search for a place") {
          showWidget.toggle()
        }
        .basicPlaceAutocomplete(
          filter: filter,
          uiCustomization: uiCustomization ?? AutocompleteUICustomization(),
          show: $showWidget,
          onSelection: { place in
            guard let placeID = place.placeID else {
              self.placesError = .internal(
                "Could not fetch place details because place ID from selected suggestion not found."
              )
              return
            }
            Task {
              let placesClient = await PlacesClient.shared
              let fetchPlaceRequest = FetchPlaceRequest(
                placeID: placeID,
                placeProperties: [.displayName, .formattedAddress]
              )
              switch await placesClient.fetchPlace(with: fetchPlaceRequest) {
              case .success(let place):
                print("Fetched place: \(place)")
                self.fetchedPlace = place
              case .failure(let placesError):
                print("Failed to fetch place: \(placesError)")
                self.placesError = placesError
              }
            }
          },
          onError: { placesError in
            self.placesError = placesError
          }
        )
        if let placesError = $placesError.wrappedValue {
          Text(placesError.localizedDescription)
            .frame(maxWidth: .infinity, alignment: .leading)
        } else if let fetchedPlace = $fetchedPlace.wrappedValue {
          Text("\(fetchedPlace)")
            .frame(maxWidth: .infinity, alignment: .leading)
        }
      }
    }
  }

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

সুইফট

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