迁移到新的 Autocomplete widget

本迁移指南面向在 3.59.8 之前的版本中集成了地点 自动补全 widget（预览版）的开发者。 本指南将向您介绍使用最新版本时需要进行的更改。

变更

• gmp-placeselect 事件已重命名为 gmp-select。
• gmp-select 事件现在返回的是 placePrediction 实例，而不是 place 实例。PlacePrediction.toPlace() 会返回正确的 Place 对象。
• gmp-requesterror 事件现在是 gmp-error。

迁移步骤

如需将地点自动补全 widget 集成迁移到最新版本， 请执行以下操作：

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