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

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

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

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

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

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

يمكنك أيضًا تخصيص الطلب لتنفيذ إما SearchByTextRequest أو SearchNearbyRequest.

الفوترة

يتم تحصيل الرسوم منك في كل مرة يتم فيها تغيير قيمة الربط configureFromSearchByTextRequest() أو configureFromSearchNearbyRequest().

إضافة ميزة "البحث عن الأماكن" إلى تطبيقك

استخدِم تطبيق "بحث الأماكن" المصغّر من خلال إضافة PlaceSearchFragment الجزء إلى التصميم.

عندما تريد أن يحمّل تطبيقك نتيجة بحث نصي أو بحث في الجوار، استخدِم configureFromSearchByTextRequest() أو configureFromSearchNearbyRequest() مع الطلب.

Kotlin

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

جافا

fragment.configureFromSearchByTextRequest(searchByTextRequest)

// or fragment.configureFromSearchNearbyRequest(searchNearbyRequest) for nearby search

يمكنك أيضًا إضافة PlaceSearchFragmentListener اختيارية إلى المكوّن لتلقّي عمليات ردّ الاتصال عند تحميل المكوّن أو اختيار مكان (إذا تم ضبطه على أن يكون قابلاً للاختيار) أو عند حدوث خطأ في تحميل المكوّن.

Kotlin

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

جافا

fragment.registerListener(
  new PlaceSearchFragmentListener() {
    @Override public void onLoad(List<? extends Place> places) {...}
    @Override public void onRequestError(Exception e) {...}
    @Override public void onPlaceSelected(Place place) {...}
  }
)

تخصيص مكوّن "البحث عن الأماكن"

تخصيص المحتوى

يجب تحديد المحتوى الذي سيعرضه المكوّن.

يضبط هذا المثال المكوّن لعرض عنوان "المكان" وتقييمه.

Kotlin

val fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS, Content.RATING))

جافا

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(listOf(Content.ADDRESS,Content.RATING));

يمكنك أيضًا تخصيص الجوانب التالية من المحتوى الذي يظهر في مكوّن "البحث عن الأماكن"، وذلك بشكل اختياري:

  • ‫PlaceSearchFragment.Content: المحتوى المعروض في المكوّن.
  • mediaSize: حجم الصورة في الاتجاه العمودي للجزء. القيمة التلقائية هي SMALL.
  • preferTruncation: لتحديد ما إذا كان سيتم اقتطاع نص كل عرض من عروض "تفاصيل المكان".
  • attributionPosition: لتحديد ما إذا كان سيتم عرض بيان مصدر البيانات في "خرائط Google" في أعلى المكوّن أو أسفله
  • selectable: تحدّد ما إذا كان يمكن اختيار كل مكان في القائمة.

أضِف إعدادات التخصيص إلى PlaceSearchFragment.

Kotlin

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

جافا

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

تخصيص اتجاه الشاشة

يكون الاتجاه التلقائي عموديًا. بالنسبة إلى الاتجاه الأفقي، حدِّد Orientation.HORIZONTAL في PlaceSearchFragment.newInstance().

Kotlin

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

جافا

PlaceSearchFragment.newInstance(
    PlaceSearchFragment.ALL_CONTENT,
    Orientation.HORIZONTAL
)

تخصيص المظهر

عند إنشاء مثيل لجزء، يمكنك تحديد مظهر يتجاوز أيّ من سمات النمط التلقائي. يمكنك تخصيص ألوان ومظهر الخطوط والمسافات والحدود والزوايا لمكوّن "تفاصيل المكان". القيمة التلقائية هي PlacesMaterialTheme.

تستخدم أي سمات للمظهر لم يتم إلغاء إعداداتها الأنماط التلقائية.

توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف إدخالاً للون في values-night/colors.xml.

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

أمثلة

إنشاء مثيل لمكوّن "البحث عن أماكن"

Kotlin

val fragment: PlaceSearchFragment =
PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT)

fragment.preferTruncation = false
fragment.attributionPosition = AttributionPosition.BOTTOM
fragment.mediaSize = MediaSize.SMALL
fragment.selectable = true

fragment.registerListener(
  object : PlaceSearchFragmentListener {
    override fun onLoad(places: List<Place>) {...}
    override fun onRequestError(e: Exception) {...}
    override fun onPlaceSelected(place: Place) {...}
  }
)

supportFragmentManager
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow()

fragment.configureFromSearchByTextRequest(searchByTextRequest)

جافا

PlaceSearchFragment fragment = PlaceSearchFragment.newInstance(PlaceSearchFragment.STANDARD_CONTENT);

fragment.setPreferTruncation(false)
fragment.setAttributionPosition(AttributionPosition.BOTTOM)
fragment.setMediaSize(MediaSize.SMALL)
fragment.setSelectable(true)

fragment.registerListener(
  new PlaceSearchFragmentListener() {
      @Override public void onLoad(List<? extends Place> places) {...}
      @Override public void onRequestError(Exception e) {...}
      @Override public void onPlaceSelected(Place place) {...}
  }
)

getSupportFragmentManager()
  .beginTransaction()
  .replace(R.id.fragment_container, fragment)
  .commitNow();

fragment.configureFromSearchByTextRequest(searchByTextRequest)

تخصيص المظهر

توفّر حزمة أدوات "خرائط Google" الجاهزة للأماكن مظهرًا داكنًا تلقائيًا، لذا قد تحتاج إلى تخصيص المظهرين الداكن والفاتح. لتخصيص المظهر الداكن، أضِف إدخالاً للون في values-night/colors.xml. 

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
    <item name="placesCornerRadius">20dp</item>
  </style>