Angular 4集成AGM实现反向地理编码时遇google未定义错误求助

你遇到的问题核心是Google Maps脚本在组件初始化时还未加载完成——尽管你声明了google变量，但全局的google对象还不存在，导致调用google.maps.Geocoder时触发未定义错误。结合AGM的最佳实践，我给你两个可行的解决方案：

方案一：使用AGM内置的Geocoder服务（推荐，更符合Angular风格） #

AGM已经封装了Google Maps的地理编码功能，不用直接操作全局google对象，能从根源上避免加载时序问题：

1. 确保AGM安装与配置正确
   先确认已安装@agm/core：

   npm install @agm/core --save
   

   然后在AppModule中导入并配置API Key（记得在Google Cloud Console启用Geocoding API）：

   import { AgmCoreModule } from '@agm/core';
   
   @NgModule({
     imports: [
       // 其他模块...
       AgmCoreModule.forRoot({
         apiKey: '你的Google Maps API Key',
         libraries: ['geocoding'] // 必须包含geocoding库才能使用反向地理编码
       })
     ]
   })
   export class AppModule { }
   

2. 修改组件代码，使用AgmGeocoder服务

   import { AgmGeocoder } from '@agm/core';
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-find-cycle',
     templateUrl: './cmp.component.html',
     styleUrls: ['./cmp.component.scss']
   })
   export class Cmp {
     address: string;
   
     // 注入AGM的Geocoder服务
     constructor(private geocoder: AgmGeocoder) {}
   
     getAddress(lat: number, lng: number) {
       console.log('Finding Address');
       // 使用AGM的geocode方法，返回Observable
       this.geocoder.geocode({ latLng: { lat, lng } }).subscribe(
         (results: any[]) => {
           if (results.length > 0) {
             const result = results[0];
             const rsltAdrComponent = result.address_components;
             const resultLength = rsltAdrComponent.length;
             if (result) {
               this.address = rsltAdrComponent[resultLength - 8].short_name;
             } else {
               alert('No address available!');
             }
           } else {
             alert('No address available!');
           }
         },
         (error) => {
           console.error('地理编码失败:', error);
           alert('Failed to get address!');
         }
       );
     }
   }
   

方案二：确保Google Maps脚本加载完成后再调用Geocoder #

如果你坚持直接使用google.maps.Geocoder，需要等待地图脚本完全加载后再执行操作：

1. 在组件模板中添加agm-map并监听mapReady事件：

   <agm-map [latitude]="默认纬度值" [longitude]="默认经度值" (mapReady)="onMapReady($event)"></agm-map>
   

2. 修改组件代码，等待地图加载完成后再执行地理编码：

   declare let google: any;
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-find-cycle',
     templateUrl: './cmp.component.html',
     styleUrls: ['./cmp.component.scss']
   })
   export class Cmp {
     address: string;
     private isMapLoaded = false;
   
     // 地图加载完成时触发，标记状态
     onMapReady(map: google.maps.Map) {
       this.isMapLoaded = true;
     }
   
     getAddress(lat: number, lng: number) {
       console.log('Finding Address');
       // 先检查地图是否已加载
       if (!this.isMapLoaded) {
         alert('地图还未加载完成，请稍等！');
         return;
       }
   
       const geocoder = new google.maps.Geocoder();
       const latlng = new google.maps.LatLng(lat, lng);
       const request = { latLng: latlng };
   
       geocoder.geocode(request, (results, status) => {
         if (status === google.maps.GeocoderStatus.OK) {
           const result = results[0];
           const rsltAdrComponent = result.address_components;
           const resultLength = rsltAdrComponent.length;
           if (result) {
             this.address = rsltAdrComponent[resultLength - 8].short_name;
           } else {
             alert('No address available!');
           }
         } else {
           console.error('地理编码状态异常:', status);
           alert('Failed to get address!');
         }
       });
     }
   }
   

额外注意事项 #

• 确保你的Google Maps API Key已经在Google Cloud Console中启用了Geocoding API，否则会返回权限错误。
• 代码中address_components的索引（resultLength -8）可能不稳定，建议根据types字段匹配地址组件（比如locality或postal_code），避免因地址结构变化导致获取错误信息。

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