مكوّن "البحث عن الأماكن"
يعرض مكوّن "البحث عن الأماكن" في حزمة أدوات "خرائط 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: لتحديد ما إذا كان سيتم اقتطاع نص كل عرض من عروض "تفاصيل المكان". القيمة التلقائية هي false. -
theme: المظهر المخصّص الذي يتم استخدامه من PlacesMaterialTheme. مزيد من المعلومات حول تغيير المظهر attributionPosition: لتحديد ما إذا كان سيتم عرض معلومات تحديد المصدر في "خرائط Google" في أعلى المكوّن أو أسفله. القيمة التلقائية هي .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.
راجِع قسم التصميم المخصّص لمزيد من المعلومات حول السمات.
توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا لـ .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)") } } }
تخصيص المظهر
توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف قيمًا لـ .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() } }