Chọn nền tảng: Android iOS JavaScript

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

Thành phần Place Autocomplete cơ bản của 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ã đị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 truy vấn. Khi người dùng nhập, 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, đố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 Place Autocomplete cơ bản có các lựa chọn tuỳ chỉnh sau: mật độ danh sách và có đưa biểu tượng vị trí hay không. Sử 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 này đượ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 một địa điểm được chọn trong danh sách.

Thêm thành phần Tự động hoàn thành cơ bản vào ứng dụng

Đặt các tham số bộ lọc tự động hoàn thành (ví dụ: các loại cần trả về, quốc gia để 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 Place Autocomplete (Mới) mà không có Places UI Kit. Hãy xem tài liệu về Place Autocomplete (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 nội dung 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(),
  theme = R.style.CustomizedTheme,
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .theme(R.style.CustomizedTheme)
  .build()

Xem ví dụ đầy đủ.

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

Tuỳ chỉnh nội dung

Mật độ danh sách

Bạn có thể chọn hiển thị danh sách 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 này sẽ hiển thị danh sách 2 dòng.

Biểu tượng vị trí

Bạn có thể chọn có hiển thị biểu tượng địa điểm mặc định trong 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.

Tuỳ chỉnh giao diện

Bạn có thể chỉ định một giao diện ghi đè mọi thuộc tính kiểu mặc định. Bạn có thể tuỳ chỉnh màu sắc, kiểu chữ, khoảng cách, đường viền và góc của thành phần Chi tiết địa điểm. Giá trị mặc định là PlacesMaterialTheme.

Mọi thuộc tính giao diện không bị ghi đè sẽ sử dụng kiểu mặc định.

Bộ công cụ giao diện người dùng Places cung cấp giao diện tối theo mặc định, vì vậy, bạn có thể cần tuỳ chỉnh cả giao diện tối và sáng. Để tuỳ chỉnh giao diện tối, hãy thêm một mục cho màu trong values-night/colors.xml.

Hãy xem phần Kiểu tuỳ chỉnh để biết thêm thông tin về việc tạo giao diện.

Thêm nội dung và nội dung tuỳ chỉnh giao diện 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(),
      theme = R.style.CustomizedTheme,
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .build()
)

Ví dụ

Thêm thành phần Tự động hoàn thành cơ bản tuỳ chỉ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(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  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)
          .theme(R.style.CustomizedTheme)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);

Tuỳ chỉnh giao diện

Bộ công cụ giao diện người dùng Places cung cấp giao diện tối theo mặc định, vì vậy, bạn có thể cần tuỳ chỉnh cả giao diện tối và sáng. Để tuỳ chỉnh giao diện tối, hãy thêm một mục cho màu trong 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>