升级@types/google.maps以替换已弃用的google.maps.places.Autocomplete

一、升级@types/google.maps依赖 #

• 执行以下命令升级到最新类型定义版本，确保支持PlaceAutocompleteElement：

  npm install @types/google.maps@latest --save-dev
  

  或使用yarn：

  yarn add @types/google.maps@latest --dev
  

• 验证升级后版本：打开package.json确认@types/google.maps版本至少为3.53.0及以上（该版本开始包含新组件类型）

二、替换代码为PlaceAutocompleteElement #

新组件是Web Component，初始化逻辑与旧版Autocomplete不同，修改你的loadGplaces方法如下：

private loadGplaces() {
    if (!this.elementRef) {
        return;
    }

    // 创建PlaceAutocompleteElement自定义元素
    const autocompleteElement = document.createElement('google-places-autocomplete') as google.maps.places.PlaceAutocompleteElement;
    
    // 配置组件选项
    autocompleteElement.options = {
        componentRestrictions: { country: 'us' },
        fields: ['address_components', 'geometry'],
    };

    // 将组件插入目标DOM容器
    this.elementRef.nativeElement.appendChild(autocompleteElement);

    // 监听地点选择事件（注意事件名改为placechanged，无下划线）
    const handlePlaceChange = () => {
        this.ngZone.run(() => {
            const place = autocompleteElement.value;
            this.placeSelected.emit(place);
        });
    };
    autocompleteElement.addEventListener('placechanged', handlePlaceChange);

    // 保存监听器用于后续销毁
    this.listeners.push({
        remove: () => autocompleteElement.removeEventListener('placechanged', handlePlaceChange)
    });
}

三、Angular额外配置（若出现自定义元素报错） #

如果Angular无法识别google-places-autocomplete自定义元素，需在组件所属模块中添加Schema支持：

1. 导入Schema：

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

2. 在模块配置中声明：

@NgModule({
  // ...其他模块配置（declarations、imports等）
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourComponentModule { }

核心差异说明 #

• 旧版Autocomplete是基于现有DOM元素包装初始化，新版PlaceAutocompleteElement是独立Web Component，需创建后插入DOM
• 事件名从place_changed改为placechanged
• 获取选中地点从调用getPlace()方法改为直接访问value属性

内容的提问来源于stack exchange，提问作者shahid zaman