Wybierz platformę: Android iOS JavaScript

Komponent Autouzupełnianie miejsc (podstawowy)

Komponent Autouzupełnianie miejsc (podstawowy) w pakiecie Places UI Kit umożliwia dodanie pojedynczego komponentu interfejsu, który zwraca identyfikator miejsca, gdy użytkownik wybierze miejsce. Komponent jest nakładką na pełny ekran, która zawiera pasek wyszukiwania, w którym użytkownicy mogą wpisywać zapytania. Gdy użytkownik wpisuje tekst, pod paskiem wyszukiwania wyświetla się lista wyników autouzupełniania. Gdy użytkownik kliknie miejsce, deweloper otrzyma obiekt miejsca zawierający tylko identyfikator miejsca. Ten komponent można dostosować.

Komponent Autouzupełnianie miejsc (podstawowy) ma te opcje dostosowywania: gęstość listy i to, czy mają być wyświetlane ikony lokalizacji. Aby dostosować komponent, użyj AutocompleteUICustomization.

Komponent Autouzupełnianie miejsc (podstawowy) możesz używać samodzielnie 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 będziemy Cię ponownie obciążać w ramach tej sesji, chyba że sesja wygaśnie lub z listy zostanie wybrane miejsce.

Dodawanie do aplikacji komponentu Autouzupełnianie (podstawowy)

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, źródło żądania wyświetlania informacji 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 (nowego).

Po utworzeniu filtra autouzupełniania dodaj dostosowania interfejsu. Zobacz opcje i instrukcje dostosowywania.

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

Zobacz pełny przykład.

Dostosowywanie komponentu Autouzupełnianie (podstawowy)

Dostosowywanie treści

Gęstość listy

Możesz wyświetlać 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 będzie wyświetlać 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.

Dostosowywanie motywu

Możesz określić motyw, który zastąpi dowolne domyślne atrybuty stylu. Możesz dostosować kolory, typografię, odstępy, obramowania i rogi komponentu Szczegóły miejsca. Domyślna wartość to PlacesMaterialTheme.

Wszystkie atrybuty motywu, które nie są zastępowane, używają domyślnych stylów.

Pakiet Places UI Kit domyślnie udostępnia ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wpis koloru w values-night/colors.xml.

Więcej informacji o motywach znajdziesz w sekcji Styl niestandardowy.

Dodawanie do komponentu Autouzupełnianie (podstawowy) dostosowań treści i motywu

Aby dostosować komponent Autouzupełnianie (podstawowy), użyj klasy 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()
)

Przykład

Dodawanie niestandardowego komponentu Autouzupełnianie (podstawowy)

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

Dostosowywanie motywu

Pakiet Places UI Kit domyślnie udostępnia ciemny motyw, więc może być konieczne dostosowanie zarówno ciemnego, jak i jasnego motywu. Aby dostosować ciemny motyw, dodaj wpis koloru w 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>