Thành phần Place Autocomplete cơ bản

Thành phần Cơ bản của tính năng Tự động hoàn thành địa điểm trong Places UI Kit cho phép bạn thêm một thành phần giao diện người dùng riêng lẻ trả về một mã địa điểm khi người dùng chọn một địa điểm. Thành phần này là một lớp phủ toàn màn hình cung cấp thanh tìm kiếm để người dùng nhập cụm từ tìm kiếm. Khi người dùng nhập nội dung, một danh sách kết quả tự động hoàn thành sẽ xuất hiện bên dưới thanh tìm kiếm. Khi người dùng nhấn vào một địa điểm, một đối tượng địa điểm chỉ có mã địa điểm sẽ được trả về cho nhà phát triển. Bạn có thể tuỳ chỉnh thành phần này.

Thành phần Basic Place Autocomplete có các lựa chọn tuỳ chỉnh sau: mật độ danh sách và có bao gồm biểu tượng vị trí hay không. Dùng AutocompleteUICustomization để tuỳ chỉnh thành phần.

Bạn có thể sử dụng thành phần Basic Place Autocomplete một cách độc lập hoặc kết hợp với các API và dịch vụ khác của Google Maps Platform.

Thanh toán

Bạn sẽ bị tính phí mỗi khi thành phần được mở và một truy vấn được thực hiện. Bạn sẽ không bị tính phí lại cho phiên đó, trừ phi phiên hết hạn hoặc bạn chọn một địa điểm trong danh sách.

Thêm thành phần Basic Autocomplete vào ứng dụng

Đặt các thông số bộ lọc tự động hoàn thành (ví dụ: các loại cần trả về, quốc gia cần giới hạn kết quả, toạ độ khu vực cho kết quả, nguồn gốc của yêu cầu hiển thị thông tin khoảng cách, nếu có) như khi bạn sử dụng tính năng Tự động hoàn thành địa điểm (Mới) mà không cần Places UI Kit. Hãy xem tài liệu về tính năng Tự động hoàn thành địa điểm (Mới) để biết hướng dẫn đầy đủ và ví dụ về mã để tạo bộ lọc tự động hoàn thành.

Sau khi tạo bộ lọc tự động hoàn thành, hãy thêm các chế độ tuỳ chỉnh giao diện người dùng. Xem các lựa chọn và hướng dẫn tuỳ chỉnh.

Kotlin

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

Java

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

Xem ví dụ đầy đủ.

Tuỳ chỉnh thành phần Tự động hoàn thành cơ bản

Mật độ danh sách

Bạn có thể chọn hiển thị danh sách gồm 2 dòng hoặc danh sách nhiều dòng. Sử dụng các lựa chọn trong AutocompleteListDensity (TWO_LINE hoặc MULTI_LINE) trong lớp AutocompleteUICustomization. Nếu bạn không chỉ định mật độ danh sách, thành phần sẽ hiển thị danh sách gồm 2 dòng.

Biểu tượng vị trí

Bạn có thể chọn hiển thị biểu tượng địa điểm mặc định trên danh sách kết quả hay không. Sử dụng các lựa chọn trong AutocompleteUIIcon (listItemDefaultIcon hoặc noIcon) trong lớp AutocompleteUICustomization.

Thêm các chế độ tuỳ chỉnh vào thành phần Tự động hoàn thành cơ bản

Sử dụng lớp AutocompleteUICustomization để tuỳ chỉnh thành phần Tự động hoàn thành cơ bản.

Kotlin

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

Java

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

Ví dụ:

Ví dụ này tạo một thành phần Tuỳ chỉnh cơ bản cho tính năng Tự động hoàn thành.

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);