Migracja do nowego widżetu autouzupełniania

Ten przewodnik migracji jest przeznaczony dla deweloperów, którzy mają integrację z widżetem autouzupełniania miejsc (wersja testowa) w wersji starszej niż 3.59.8. W tym przewodniku znajdziesz informacje o zmianach, które musisz wprowadzić, aby korzystać z najnowszej wersji.

Zmiany

  • Nazwa zdarzenia gmp-placeselect została zmieniona na gmp-select.
  • Zdarzenie gmp-select zwraca teraz instancję placePrediction zamiast instancji place. PlacePrediction.toPlace() zwraca odpowiedni obiekt Place.
  • Wydarzenie gmp-requesterror jest teraz gmp-error.

Etapy migracji

Aby przenieść integrację widżetu autouzupełniania miejsc na najnowszą wersję, wykonaj te czynności:

  1. Sprawdź, czy w konsoli Cloud w przypadku Twojego projektu włączony jest interfejs Places API (nowy).
  2. Dodaj Places API (nowy) do listy ograniczeń interfejsu API dla używanego klucza interfejsu API.
  3. W środowisku programistycznym wprowadź i przetestuj te zmiany:

Aktualizowanie detektora zdarzeń

Zmień gmp-placeselect na gmp-select, jak w tych przykładach:

Przed

autocompleteElement.addEventListener('gmp-placeselect', (event) => {
  console.log(event.place);
});

Po

autocompleteElement.addEventListener('gmp-select', (event) => {
  console.log(event.placePrediction.toPlace());
});

Zmień componentRestrictions na includedRegionCodes

Zmień instancje componentRestrictions, aby używać pola includedRegionCodes, jak pokazano w tych przykładach.

Przed

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['US']},
  ...
});

Po

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedRegionCodes: ['US'],
  ...

Zmień types na includedPrimaryTypes

Zmień instancje types, aby używać pola includedPrimaryTypes, jak pokazano w tych fragmentach kodu.

Przed

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  types: ['restaurant'],
});

Po

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['restaurant'],
});

Zmień gmp-requesterror na gmp-error

Zmień wystąpienia gmp-requesterror na gmp-error, jak pokazano w tych fragmentach kodu:

Przed

autocompleteElement.addEventListener('gmp-requesterror', (event) => {
  console.log('an error occurred');
});

Po

autocompleteElement.addEventListener('gmp-error', (event) => {
  console.log('an error occurred');
});