Di chuyển sang Tiện ích tự động hoàn thành mới

Hướng dẫn di chuyển này dành cho những nhà phát triển có tích hợp với Tiện ích tự động hoàn thành địa điểm (Bản dùng thử) trước phiên bản 3.59.8. Hướng dẫn này cho bạn biết những thay đổi cần thực hiện để sử dụng phiên bản mới nhất.

Các thay đổi

  • Sự kiện gmp-placeselect đã được đổi tên thành gmp-select.
  • Sự kiện gmp-select hiện trả về một thực thể placePrediction thay vì một thực thể place. PlacePrediction.toPlace() trả về đối tượng Place thích hợp.
  • Sự kiện gmp-requesterror hiện là gmp-error.

Các bước di chuyển

Để di chuyển chế độ tích hợp Tiện ích tự động hoàn thành địa điểm sang phiên bản mới nhất, hãy làm như sau:

  1. Xác minh rằng bạn đã bật Places API (mới) cho dự án của mình trong Cloud Console.
  2. Thêm Places API (mới) vào danh sách các quy tắc hạn chế đối với API cho khoá API mà bạn đang sử dụng.
  3. Trong môi trường phát triển, hãy thực hiện và kiểm thử các thay đổi sau:

Cập nhật trình xử lý sự kiện

Thay đổi gmp-placeselect thành gmp-select như trong các đoạn mã sau:

Trước

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

Sau

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

Thay đổi componentRestrictions thành includedRegionCodes

Thay đổi các thực thể của componentRestrictions để sử dụng trường includedRegionCodes, như minh hoạ trong các đoạn mã sau.

Trước

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

Sau

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

Thay đổi types thành includedPrimaryTypes

Thay đổi các thực thể của types để sử dụng trường includedPrimaryTypes, như minh hoạ trong các đoạn mã sau.

Trước

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

Sau

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

Thay đổi gmp-requesterror thành gmp-error

Thay đổi các thực thể của gmp-requesterror thành gmp-error, như minh hoạ trong các đoạn mã sau:

Trước

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

Sau

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