遷移至新的 Autocomplete 小工具

本遷移指南適用於 3.59.8 版之前，已整合地點自動完成小工具 (預先發布版) 的開發人員。本指南將說明使用最新版本時需要進行的變更。

變更

• gmp-placeselect 事件已重新命名為 gmp-select。
• gmp-select 事件現在會傳回 placePrediction 執行個體，而非 place 執行個體。PlacePrediction.toPlace() 會傳回正確的 Place 物件。
• 「gmp-requesterror」活動現已gmp-error。

遷移步驟

如要將 Place Autocomplete 小工具整合項目遷移至最新版本，請執行下列步驟：

1. 在 Cloud 控制台中，確認專案已啟用「Places API (新版)」。
2. 將Places API (新版) 加入您使用的 API 金鑰 API 限制清單。
3. 在開發環境中，執行並測試下列變更：

更新事件監聽器

將 gmp-placeselect 變更為 gmp-select，如以下程式碼片段所示：

之前

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

晚於

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

將 componentRestrictions 變更為 includedRegionCodes

將 componentRestrictions 項目改為使用 includedRegionCodes 欄位，如以下程式碼片段所示。

之前

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

晚於

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

將 types 變更為 includedPrimaryTypes

將 types 項目改為 includedPrimaryTypes 欄位，如以下程式碼片段所示。

之前

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

晚於

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

將 gmp-requesterror 變更為 gmp-error

將 gmp-requesterror 的例項變更為 gmp-error，如下列程式碼片段所示：

之前

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

完成後

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