从@agm/core迁移至@angular/google-maps：缺失MapsAPILoader替代方案

在@angular/google-maps中，官方已集成Google Maps脚本加载逻辑，无需再依赖@agm/core的MapsAPILoader。以下是对应原功能的实现方案：

1. 配置Google Maps模块 #

首先在你的模块（如AppModule）中导入GoogleMapsModule，并配置API密钥和必需的places库（只有加载该库才能使用地点自动完成功能）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GoogleMapsModule, provideGoogleMaps } from '@angular/google-maps';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GoogleMapsModule],
  providers: [
    provideGoogleMaps({
      apiKey: '你的Google Maps API密钥',
      libraries: ['places'] // 加载Places服务库
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 组件中实现地点自动完成 #

使用GoogleMapsAPIWrapper确保Maps脚本加载完成后，初始化Autocomplete实例，逻辑和原代码保持一致：

import { Component, ElementRef, ViewChild, NgZone } from '@angular/core';
import { GoogleMapsAPIWrapper } from '@angular/google-maps';

@Component({
  selector: 'app-root',
  template: `<input #searchInput type="text" placeholder="搜索地点">`
})
export class AppComponent {
  @ViewChild('searchInput') searchElementRef!: ElementRef<HTMLInputElement>;

  constructor(
    private zone: NgZone,
    private mapsWrapper: GoogleMapsAPIWrapper
  ) {}

  ngAfterViewInit(): void {
    // 等待Maps脚本加载完成
    this.mapsWrapper.getNativeMap().then(() => {
      const autocomplete = new google.maps.places.Autocomplete(
        this.searchElementRef.nativeElement,
        { types: ['geocode'] }
      );

      autocomplete.addListener('place_changed', () => {
        this.zone.run(() => {
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
          // 在这里处理获取到的地点数据，比如赋值给组件变量或执行其他逻辑
          console.log('选中的地点信息:', place);
        });
      });
    });
  }
}

关键说明 #

• 无需手动调用load()方法：GoogleMapsAPIWrapper.getNativeMap()会自动等待Google Maps脚本加载完成后返回Promise
• 必须配置libraries: ['places']：否则google.maps.places对象会不存在，无法初始化Autocomplete
• 保留NgZone.run()：Google Maps的回调事件会在Angular Zone外触发，需要通过zone.run()确保Angular的变更检测正常工作

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