เลือกแพลตฟอร์ม: Android iOS JavaScript

คอมโพเนนต์ Place Autocomplete พื้นฐาน

คอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานของ Places UI Kit ช่วยให้คุณเพิ่มคอมโพเนนต์ UI แต่ละรายการที่แสดงรหัสสถานที่เมื่อผู้ใช้เลือกสถานที่ได้ คอมโพเนนต์นี้เป็นหน้าจอแบบเต็มที่แสดงแถบค้นหาเพื่อให้ผู้ใช้ป้อนคำค้นหา ขณะที่ผู้ใช้พิมพ์ ระบบจะแสดงรายการผลการค้นหาที่เติมข้อความอัตโนมัติใต้แถบค้นหา เมื่อผู้ใช้แตะสถานที่ ระบบจะแสดงออบเจ็กต์สถานที่ที่มีเฉพาะรหัสสถานที่แก่นักพัฒนาแอป คอมโพเนนต์นี้ปรับแต่งได้

คอมโพเนนต์การเติมข้อความอัตโนมัติของสถานที่พื้นฐานมีตัวเลือกการปรับแต่งต่อไปนี้ ความหนาแน่นของรายการ และจะรวมไอคอนตำแหน่งหรือไม่ ใช้ AutocompleteUICustomization เพื่อปรับแต่งคอมโพเนนต์

คุณสามารถใช้คอมโพเนนต์ Place Autocomplete พื้นฐานแบบแยกกันหรือใช้ร่วมกับ API และบริการอื่นๆ ของแพลตฟอร์ม Google Maps ก็ได้

การเรียกเก็บเงิน

ระบบจะเรียกเก็บเงินจากคุณทุกครั้งที่มีการเปิดคอมโพเนนต์และมีการค้นหา ระบบจะไม่เรียกเก็บเงินสำหรับเซสชันนั้นอีก เว้นแต่เซสชันจะหมดอายุหรือมีการเลือกสถานที่จากรายการ

เพิ่มคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐานลงในแอป

ตั้งค่าพารามิเตอร์ตัวกรองการเติมข้อความอัตโนมัติ (เช่น ประเภทที่จะแสดง ประเทศที่จะจำกัดผลลัพธ์ พิกัดภูมิภาคสำหรับผลลัพธ์ ต้นทางของคำขอเพื่อแสดงข้อมูลระยะทาง หากมี) เช่นเดียวกับการใช้การเติมข้อความอัตโนมัติของ Places (ใหม่) โดยไม่มี Places UI Kit ดูวิธีการทั้งหมดและตัวอย่างโค้ดเพื่อสร้างตัวกรองการเติมข้อความอัตโนมัติได้ในเอกสารประกอบของ Place Autocomplete (ใหม่)

เมื่อสร้างตัวกรองการเติมข้อความอัตโนมัติแล้ว ให้เพิ่มการปรับแต่ง UI ดูตัวเลือกและวิธีการปรับแต่ง

Kotlin

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

Java

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

ดูตัวอย่างแบบเต็ม

ปรับแต่งคอมโพเนนต์การเติมข้อความอัตโนมัติพื้นฐาน

ความหนาแน่นของรายการ

คุณเลือกได้ว่าจะแสดงรายการ 2 บรรทัดหรือรายการหลายบรรทัด ใช้ตัวเลือกใน AutocompleteListDensity (TWO_LINE หรือ MULTI_LINE) ในชั้นเรียน AutocompleteUICustomization หากไม่ได้ระบุความหนาแน่นของรายการ คอมโพเนนต์จะแสดงรายการ 2 บรรทัด

ไอคอนตำแหน่ง

คุณเลือกได้ว่าจะแสดงไอคอนสถานที่เริ่มต้นในรายการผลการค้นหาหรือไม่ ใช้ตัวเลือกใน 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);