اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

مكوّن "البحث عن الأماكن"

يعرض مكوّن "البحث عن الأماكن" في حزمة أدوات Places UI Kit نتائج البحث عن مكان في قائمة.

مكوّن "البحث عن الأماكن" في حزمة أدوات "خرائط Google" الجاهزة للأماكن

يمكنك تخصيص قائمة "البحث عن أماكن". يمكنك تحديد ما يلي:

  • المحتوى المطلوب عرضه
  • حجم الوسائط في الوضع العمودي
  • اقتطاع النص
  • الاتجاه
  • عمليات إلغاء المظهر التي تتطابق مع علامتك التجارية ولغة تصميم تطبيقك
  • موضع تحديد المصدر
  • ما إذا كان يمكن اختيار مكان

يمكنك أيضًا تخصيص الطلب لتنفيذ إما 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" في أعلى المكوّن أو أسفله. القيمة التلقائية هي .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.

راجِع قسم التصميم المخصّص لمزيد من المعلومات حول التصميم.

توفّر حزمة أدوات Places UI Kit مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا إلى .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)")
    }
  }
}
    

تخصيص المظهر

توفّر حزمة أدوات Places UI Kit مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا إلى .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()
    }
}