選取平台: Android iOS JavaScript

基本 Place Autocomplete 元件

Places UI Kit 的 Basic Place Autocomplete 元件可讓您新增個別 UI 元件,在使用者選取地點時傳回地點 ID。這個元件是全螢幕的封面,提供搜尋列供使用者輸入查詢。使用者輸入內容時,搜尋列下方會顯示自動完成結果清單。使用者輕觸地點時,系統只會將地點 ID 傳回給開發人員。這個元件可自訂。

Basic Place Autocomplete 元件提供下列自訂選項:清單密度,以及是否要加入位置圖示。使用 AutocompleteUICustomization 自訂元件。

您可以單獨使用基本地點自動完成元件,也可以搭配其他 Google Maps Platform API 和服務使用。

帳單

每次開啟元件並提出查詢時,系統都會向您收費。除非工作階段過期或從清單中選取地點,否則系統不會再次向你收費。

在應用程式中加入 Basic Autocomplete 元件

設定自動完成篩選器參數 (例如要傳回的類型、要限制結果的國家/地區、結果的區域座標、要求來源 (如適用) 來顯示距離資訊),就像使用 Place Autocomplete (新版) 時一樣,但不需要 Places UI Kit。如需完整操作說明和建立自動完成篩選器的程式碼範例,請參閱 Place Autocomplete (New) 說明文件

建立自動完成篩選器後,請新增 UI 自訂項目。查看自訂選項和操作說明。

Kotlin

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

Java

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

查看完整範例

自訂基本自動完成元件

清單密度

您可以選擇顯示兩行清單或多行清單。在 AutocompleteUICustomization 類別中,使用 AutocompleteListDensity (TWO_LINEMULTI_LINE) 中的選項。如未指定清單密度,元件會顯示兩行清單。

位置圖示

您可以選擇是否要在結果清單中顯示預設地點圖示。在 AutocompleteUICustomization 類別中使用 AutocompleteUIIcon 中的選項 (listItemDefaultIconnoIcon)。

在基本自動完成元件中新增自訂項目

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