请选择平台: Android iOS JavaScript

基本地点自动补全组件

Places UI Kit 的基本地点自动补全组件可让您添加一个单独的界面组件,该组件会在用户选择地点时返回地点 ID。该组件是一个全屏覆盖层,可为用户提供一个用于输入查询内容的搜索栏。当用户输入内容时,搜索栏下方会显示自动补全结果列表。当用户点按某个地点时,系统会向开发者返回一个仅包含地点 ID 的地点对象。此组件可自定义。

基本地点自动补全组件具有以下自定义选项:列表密度,以及是否包含位置图标。使用 AutocompleteUICustomization 自定义组件。

您可以单独使用基本地点自动填充组件,也可以将其与其他 Google Maps Platform API 和服务搭配使用。

结算

每次打开该组件并进行查询时,系统都会向您收取费用。除非会话过期或从列表中选择某个地点,否则系统不会再针对该会话向您收费。

向应用添加基本自动补全组件

设置自动补全过滤条件参数(例如要返回的类型、要将结果限定到的国家/地区、结果的区域坐标、用于显示距离信息的请求来源 [如有]),就像在不使用 Places UI Kit 的情况下使用地点自动补全(新)一样。如需查看完整说明和用于创建自动补全过滤器的代码示例,请参阅地点自动补全(新)文档

创建自动补全过滤条件后,添加界面自定义设置。查看自定义选项和说明。

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

查看完整示例

自定义基本自动补全组件

自定义内容

列表密度

您可以选择显示双行列表或多行列表。使用 AutocompleteUICustomization 类中的 AutocompleteListDensity 选项(TWO_LINEMULTI_LINE)。如果您未指定列表密度,该组件将显示双行列表。

“位置”图标

您可以选择是否在结果列表中显示默认地点图标。使用 AutocompleteUICustomization 类中的 AutocompleteUIIconlistItemDefaultIconnoIcon)中的选项。

自定义主题

实例化 fragment 时,您可以指定一个主题来替换任何默认样式属性。您可以自定义地点详情组件的颜色、排版、间距、边框和边角。默认值为 PlacesMaterialTheme

未被覆盖的任何主题背景属性都使用默认样式。

Places 界面套件默认提供深色主题,因此您可能需要同时自定义深色主题和浅色主题。如需自定义深色主题,请在 values-night/colors.xml 中为相应颜色添加条目。

如需详细了解主题,请参阅自定义样式部分。

向基本自动补全组件添加内容和主题自定义设置

使用 AutocompleteUICustomization 类自定义基本自动补全组件。

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

示例

添加自定义的基本自动补全组件。

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

自定义主题

Places 界面套件默认提供深色主题,因此您可能需要同时自定义深色主题和浅色主题。如需自定义深色主题,请在 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>