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

المكوّن الأساسي لميزة "الإكمال التلقائي للأماكن"

يتيح لك مكوّن "الإكمال التلقائي الأساسي للأماكن" في Places UI Kit إضافة مكوّن فردي لواجهة المستخدم يعرض رقم تعريف مكان عندما يختار المستخدم مكانًا. المكوّن عبارة عن غطاء بملء الشاشة يوفّر شريط بحث للمستخدمين لإدخال طلب بحث. أثناء الكتابة، ستظهر قائمة بنتائج الإكمال التلقائي أسفل شريط البحث. عندما ينقر المستخدم على مكان، يتم عرض عنصر مكان يتضمّن معرّف المكان فقط للمطوّر. هذا المكوّن قابل للتخصيص.

يتضمّن مكوّن "الإكمال التلقائي للأماكن" الأساسي خيارات التخصيص التالية: كثافة القائمة، وما إذا كان سيتم تضمين رموز المواقع الجغرافية. استخدِم AutocompleteUICustomization لتخصيص المكوّن.

يمكنك استخدام مكوّن "الإكمال التلقائي الأساسي للأماكن" بشكل مستقل أو بالاشتراك مع واجهات برمجة التطبيقات والخدمات الأخرى في Google Maps Platform.

الفوترة

يتم تحصيل رسوم منك في كل مرة يتم فيها فتح المكوّن وإجراء طلب بحث. لن يتم تحصيل رسوم منك مرة أخرى مقابل هذه الجلسة ما لم تنتهِ صلاحية الجلسة أو يتم اختيار مكان من القائمة.

إضافة مكوّن "الإكمال التلقائي الأساسي" إلى تطبيقك

اضبط مَعلمات فلتر الإكمال التلقائي (على سبيل المثال، الأنواع المطلوب عرضها، والبلد الذي يجب حصر النتائج فيه، وإحداثيات المنطقة للنتائج، ومصدر الطلب لعرض معلومات المسافة، إذا كانت متاحة) كما تفعل عند استخدام Place Autocomplete (New) بدون Places UI Kit. راجِع مستندات Place Autocomplete (جديد) للحصول على التعليمات الكاملة ومثال على الرمز البرمجي لإنشاء فلتر إكمال تلقائي.

بعد إنشاء فلتر الإكمال التلقائي، أضِف تخصيصات واجهة المستخدم. الاطّلاع على خيارات التخصيص والتعليمات

Kotlin

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .build()

الاطّلاع على المثال الكامل

تخصيص مكوّن "الإكمال التلقائي الأساسي"

كثافة القائمة

يمكنك اختيار عرض قائمة من سطرَين أو قائمة متعددة الأسطر. استخدِم الخيارات في AutocompleteListDensity (TWO_LINE أو MULTI_LINE) في الفئة AutocompleteUICustomization. إذا لم تحدّد كثافة القائمة، سيعرض المكوّن قائمة من سطرَين.

رمز الموقع الجغرافي

يمكنك اختيار ما إذا كنت تريد عرض رمز مكان تلقائي في قائمة النتائج. استخدِم الخيارات في AutocompleteUIIcon (listItemDefaultIcon أو noIcon) في الفئة AutocompleteUICustomization.

إضافة تخصيصات إلى مكوّن "الإكمال التلقائي الأساسي"

استخدِم الفئة AutocompleteUICustomization لتخصيص مكوّن "الإكمال التلقائي الأساسي".

Kotlin

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .build()
)

مثال

ينشئ هذا المثال مكوّن "الإكمال التلقائي الأساسي" المخصّص.

Kotlin

  val basicPlaceAutocompleteActivityResultLauncher:
  ActivityResultLauncher<Intent> =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
      result: ActivityResult ->
        val intent = result.data
        val place: Place? = BasicPlaceAutocomplete.getPlaceFromIntent(intent!!)
        val status: Status? =  
          BasicPlaceAutocomplete.getResultStatusFromIntent(intent!!)
        // ...
      }
  
  val autocompleteIntent: Intent =
    BasicPlaceAutocomplete.createIntent(this) {
      setInitialQuery("INSERT_QUERY_TEXT")
      setOrigin(LatLng(10.0, 10.0))
      // ...
  
      setAutocompleteUiCustomization(
        AutocompleteUiCustomization.create(
          listDensity = AutocompleteListDensity.MULTI_LINE,
          listItemIcon = AutocompleteUiIcon.noIcon(),
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

Java

  ActivityResultLauncher<Intent> basicPlaceAutocompleteActivityResultLauncher =
    registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
          Intent intent = result.getData();
          if (intent != null) {
            Place place =
              BasicPlaceAutocomplete.getPlaceFromIntent(intent);
            Status status =
              BasicPlaceAutocomplete.getResultStatusFromIntent(intent);
            //...
          }
        }
      }
    );
  
  Intent basicPlaceAutocompleteIntent =
    new BasicPlaceAutocomplete.IntentBuilder()
      .setInitialQuery("INSERT_QUERY_TEXT")
      .setOrigin(new LatLng(10.0, 10.0))
      //...
  
      .setAutocompleteUiCustomization(
        AutocompleteUiCustomization.builder()
          .listItemIcon(AutocompleteUiIcon.noIcon())
          .listDensity(AutocompleteListDensity.MULTI_LINE)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);