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 zapoznawcza) w wersji wcześniejszej niż 3.59.8. Z tego przewodnika dowiesz się, jakie zmiany 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, a nie instancję place. PlacePrediction.toPlace() zwraca prawidłowy Place obiekt.
  • Zdarzenie gmp-requesterror to teraz gmp-error.

Kroki migracji

Aby przeprowadzić migrację integracji z widżetem autouzupełniania miejsc do najnowszej wersji, wykonaj te czynności:

  1. Sprawdź w konsoli Cloud, czy w projekcie jest włączony interfejs Places API (nowy).
  2. Dodaj interfejs 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 pokazano w tych fragmentach kodu:

Przed

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

Po

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

Zmienianie componentRestrictions na includedRegionCodes

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

Przed

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

Po

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

Zmienianie 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'],
});

Zmienianie gmp-requesterror na gmp-error

Zmień instancje 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');
});