Angular项目中Google Places Autocomplete加载失败问题求助

针对你遇到的「此页面无法加载Google Maps」错误，结合代码和常见问题，给出以下排查与修复方向：

1. 检查Google Maps JS API引入的正确性 #

确认index.html中的API引入链接必须包含places库参数，且API密钥有效：

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

• 登录Google Cloud控制台，确认该密钥已启用Places API
• 检查密钥的配额是否耗尽，或是否设置了错误的IP/HTTP referrer限制导致请求被拦截

2. 确保Autocomplete在视图渲染完成后初始化 #

Angular中，如果getPlaceAutocomplete调用时机过早（比如ngOnInit阶段），this.addresstext?.nativeElement可能还未渲染完成，导致Autocomplete初始化失败。将初始化逻辑移至ngAfterViewInit生命周期钩子：

ngAfterViewInit(): void {
  this.getPlaceAutocomplete();
}

3. 校验初始化参数的有效性 #

• 检查this.latitude和this.longitude是否为有效数值，若为NaN或无效值，会导致defaultBounds计算错误，进而触发初始化失败。可在方法开头添加日志验证：

  console.log('center坐标:', center);
  console.log('默认范围:', defaultBounds);
  

• 当restrictAddressSearchToServiceableCitiesAndStates为true时，代码未设置componentRestrictions: { country: 'US' }，虽然这不会直接导致加载失败，但会偏离“仅搜索美国地址”的需求，建议补充该配置：

  const autocomplete: any = new google.maps.places.Autocomplete(this.addresstext?.nativeElement,
    {
      fields: ["address_components", "formatted_address"],
      types: [this.adressType],
      componentRestrictions: { country: 'US' } // 补充美国地址限制
    });
  

4. 添加错误捕获便于排查 #

在getPlaceAutocomplete方法中添加try-catch，捕获初始化时的具体错误信息：

private getPlaceAutocomplete() {
  try {
    // 原代码逻辑
  } catch (error) {
    console.error('Autocomplete初始化失败详情:', error);
  }
}

5. 检查网络请求状态 #

打开浏览器开发者工具的Network标签，查看Google Maps API请求的状态码：

• 403：密钥权限不足、配额耗尽或限制规则错误
• 404：API引入链接格式错误（如缺失libraries=places）

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