迁移到新的 Autocomplete widget

本迁移指南面向在 3.59.8 版之前与地点自动补全微件（预览版）集成过的开发者。本指南将向您介绍使用最新版本需要做出的更改。

变更

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