Wybierz platformę: Android iOS JavaScript

Podstawowy komponent Autouzupełnianie miejsc

Komponent Podstawowe autouzupełnianie miejsc w interfejsie Places UI Kit umożliwia dodanie pojedynczego komponentu interfejsu, który zwraca identyfikator miejsca, gdy użytkownik wybierze miejsce. Komponent to pełnoekranowa nakładka z paskiem wyszukiwania, w którym użytkownicy mogą wpisać zapytanie. Gdy użytkownik wpisuje tekst, pod paskiem wyszukiwania wyświetla się lista wyników autouzupełniania. Gdy użytkownik kliknie miejsce, deweloperowi zostanie zwrócony obiekt miejsca zawierający tylko identyfikator miejsca. Ten komponent można dostosować.

Komponent podstawowego automatycznego uzupełniania miejsc ma te opcje dostosowywania: gęstość listy i to, czy mają być uwzględnione ikony lokalizacji. Aby dostosować komponent, użyj AutocompleteUICustomization.

Komponent podstawowego autouzupełniania miejsca możesz używać niezależnie lub w połączeniu z innymi interfejsami API i usługami Google Maps Platform.

Płatności

Opłata jest naliczana za każdym razem, gdy komponent zostanie otwarty i zostanie wysłane zapytanie. Nie obciążymy Cię ponownie za tę sesję, chyba że wygaśnie lub wybierzesz miejsce z listy.

Dodawanie do aplikacji komponentu podstawowego autouzupełniania

Ustaw parametry filtra autouzupełniania (np. typy do zwrócenia, kraj, do którego mają być ograniczone wyniki, współrzędne regionu dla wyników, pochodzenie żądania, aby wyświetlać informacje o odległości, jeśli są dostępne) tak jak w przypadku korzystania z autouzupełniania miejsc (nowego) bez pakietu Places UI Kit. Pełne instrukcje i przykład kodu do utworzenia filtra autouzupełniania znajdziesz w dokumentacji autouzupełniania miejsc (nowa wersja).

Po utworzeniu filtra autouzupełniania dodaj dostosowania interfejsu. Wyświetl opcje dostosowywania i instrukcje

Kotlin

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

Java

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

Zobacz pełny przykład

Dostosowywanie komponentu Podstawowe autouzupełnianie

Gęstość listy

Możesz wyświetlić listę dwuwierszową lub wielowierszową. Użyj opcji w AutocompleteListDensity (TWO_LINE lub MULTI_LINE) w klasie AutocompleteUICustomization. Jeśli nie określisz gęstości listy, komponent wyświetli listę dwuwierszową.

Ikona lokalizacji

Możesz wybrać, czy na liście wyników ma się wyświetlać domyślna ikona miejsca. Użyj opcji w AutocompleteUIIcon (listItemDefaultIcon lub noIcon) w klasie AutocompleteUICustomization.

Dodawanie dostosowań do komponentu Podstawowe autouzupełnianie

Aby dostosować komponent podstawowego autouzupełniania, użyj klasy AutocompleteUICustomization.

Kotlin

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

Java

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

Przykład

W tym przykładzie tworzymy niestandardowy komponent podstawowego autouzupełniania.

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