基本地点自动补全组件
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_LINE
或 MULTI_LINE
)。如果您未指定列表密度,该组件将显示双行列表。
“位置”图标
您可以选择是否在结果列表中显示默认地点图标。使用 AutocompleteUICustomization
类中的 AutocompleteUIIcon
(listItemDefaultIcon
或 noIcon
)中的选项。
自定义主题
实例化 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>