出现这个问题是因为在加载 Google Maps API 时，多次将该脚本添加到页面上。通常，这是由于多次导入包含 Google Maps API 的模块造成的。为了避免这个问题，我们可以使用Angular的惰性加载特性。

步骤一：将引用 Google Maps API 的代码迁移到组件级别，而不是应用程序级别。在某个组件的模板中引用带有 *ngIf 的 div 元素，然后在该组件的类中加载 JavaScript API。

例如：

  


//component class
showMap: boolean = false;

loadMap() {
  this.showMap = true;
  const script = document.createElement('script');
  script.async = true;
  script.defer = true;
  script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY';
  document.body.appendChild(script);
}

步骤二：在应用程序的根模块中，使用 loadChildren 特性来惰性加载地图组件。

例如：

const routes: Routes = [
  { path: 'map', loadChildren: () => import('./map/map.module').then(m => m.MapModule) },
  // other routes
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    { provide: LAZY_MAPS_API_CONFIG, useValue: lazyMapsConfig }
  ]
})
export class AppRoutingModule {}

在 map.module.ts 中，可以定义 Map 组件，并在该组件中加载和使用 Google Maps API。

例如：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { MapComponent } from './map.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: MapComponent }
    ])
  ],
  declarations: [MapComponent]
})
export class MapModule {}

通过