Выберите платформу: Android iOS JavaScript

Базовый компонент автозаполнения мест

Компонент Basic Place Autocomplete из набора Places UI Kit позволяет добавить отдельный компонент пользовательского интерфейса, который возвращает идентификатор места при его выборе пользователем. Этот компонент представляет собой полноэкранную обложку с панелью поиска для ввода запроса. По мере ввода текста под панелью поиска отображается список результатов автозаполнения. При нажатии на название места разработчику возвращается объект места, содержащий только идентификатор места. Этот компонент можно настраивать.

Компонент Basic Place Autocomplete имеет следующие параметры настройки: плотность списка и необходимость добавления значков местоположений. Для настройки компонента используйте AutocompleteUICustomization .

Компонент Basic Place Autocomplete можно использовать самостоятельно или вместе с другими API и сервисами платформы Google Maps.

Биллинг

С вас будет взиматься плата за каждый раз, когда компонент открывается и выполняется запрос. Плата за этот сеанс будет списываться только после истечения срока его действия или выбора места из списка.

Добавьте компонент «Базовый автозаполнение» в свое приложение

Задайте параметры фильтра автозаполнения (например, возвращаемые типы, страну, которой нужно ограничить результаты, координаты региона для результатов, источник запроса для отображения информации о расстоянии, если она доступна), как при использовании Place Autocomplete (New) без Places UI Kit. Полные инструкции и пример кода для создания фильтра автозаполнения см. в документации Place Autocomplete (New).

После создания фильтра автозаполнения добавьте настройки пользовательского интерфейса. См. параметры настройки и инструкции.

Котлин

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
  theme = R.style.CustomizedTheme,
)

Ява

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

См. полный пример .

Настройте базовый компонент автозаполнения

Настроить контент

Плотность списка

Вы можете выбрать отображение двухстрочного или многострочного списка. Используйте параметры AutocompleteListDensity ( TWO_LINE или MULTI_LINE ) в классе AutocompleteUICustomization . Если плотность списка не указана, компонент отобразит двухстрочный список.

Значок местоположения

Вы можете выбрать, отображать ли значок места по умолчанию в списке результатов. Используйте параметры AutocompleteUIIcon ( listItemDefaultIcon или noIcon ) в классе AutocompleteUICustomization .

Настройте тему

При создании фрагмента можно указать тему, которая переопределяет любые атрибуты стиля по умолчанию. Вы можете настроить цвета, оформление, интервалы, границы и углы компонента «Сведения о месте». Значение по умолчанию — PlacesMaterialTheme .

Все атрибуты темы, которые не переопределены, используют стили по умолчанию.

В Places UI Kit по умолчанию установлена ​​тёмная тема, поэтому вам может потребоваться настроить как тёмную, так и светлую. Чтобы настроить тёмную тему, добавьте запись цвета в values-night/colors.xml .

Дополнительную информацию о темах см. в разделе «Пользовательский стиль» .

Добавьте настройки контента и темы в базовый компонент автозаполнения.

Используйте класс AutocompleteUICustomization для настройки базового компонента автозаполнения.

Котлин

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
      theme = R.style.CustomizedTheme,
    )
)

Ява

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

Пример

Добавьте пользовательский компонент базового автозаполнения.

Котлин

  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)

Ява

  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 UI Kit по умолчанию установлена ​​тёмная тема, поэтому вам может потребоваться настроить как тёмную, так и светлую. Чтобы настроить тёмную тему, добавьте запись цвета в 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>