Angular 15.5.0集成Google maps Autocomplete兼容问题求解

你遇到的所有报错本质都是第三方Angular封装库长期未更新导致的版本兼容问题，绕开这些封装库直接调用原生API是最稳定的方案，适配Angular 12及以上所有版本。

前置配置 #

你已经成功集成google-map、map-markers组件，说明已经引入了Google Maps JS API，只需要补充加载Places库即可：

• 如果是在index.html中引入的API，在URL参数中添加libraries=places：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>

• 如果是用@angular/google-maps包加载的，在loader配置中补充places库参数即可。
• 安装类型声明包：运行npm install @types/google.maps --save-dev

实现自动完成组件 #

组件模板（address-autocomplete.component.html） #

<input 
  type="text" 
  #addressInput 
  placeholder="输入地址搜索"
>

组件逻辑（address-autocomplete.component.ts） #

import { Component, ViewChild, AfterViewInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-address-autocomplete',
  templateUrl: './address-autocomplete.component.html'
})
export class AddressAutocompleteComponent implements AfterViewInit {
  @ViewChild('addressInput') addressInput: any;
  // 对外输出选择后的地址和坐标
  @Output() addressSelected = new EventEmitter<{
    formattedAddress: string;
    lat: number;
    lng: number;
  }>();

  ngAfterViewInit(): void {
    // 初始化Autocomplete实例，可自定义配置项
    const autocomplete = new google.maps.places.Autocomplete(
      this.addressInput.nativeElement,
      {
        // 示例：限制搜索范围为中国大陆，不需要可删除该配置
        componentRestrictions: { country: 'cn' },
        fields: ['formatted_address', 'geometry']
      }
    );

    // 监听地址选择事件
    autocomplete.addListener('place_changed', () => {
      const place = autocomplete.getPlace();
      if (!place.geometry?.location) return;
      
      // 抛出结果供父组件使用
      this.addressSelected.emit({
        formattedAddress: place.formatted_address || '',
        lat: place.geometry.location.lat(),
        lng: place.geometry.location.lng()
      });
    });
  }
}

组件调用 #

在需要使用搜索功能的父组件中直接引入：

<app-address-autocomplete 
  (addressSelected)="handleAddressSelect($event)"
></app-address-autocomplete>

父组件添加对应处理逻辑即可：

handleAddressSelect(data: {formattedAddress: string, lat: number, lng: number}) {
  // 拿到地址和坐标后可直接用于标记地图、后续业务存储等操作
  console.log(data);
}

常见问题修复 #

• 如果编译时提示google未定义，在tsconfig.app.json的types数组中添加"google.maps"即可
• 需要自定义下拉框样式的话，直接覆盖Google官方提供的.pac-container类的CSS属性即可
• 可以卸载所有之前安装的@agm/core、ngx-google-places-autocomplete等第三方封装库，避免冗余依赖冲突

内容的提问来源于stack exchange，提问作者Simone Grassi