Angular集成Google Maps API开发遇落地页404错误 排错及nearby search教程求助

1. 落地页404报错修复 #

• 路由配置缺失：检查项目路由配置文件，未将UserLandingPageComponent绑定到根路径/的路由规则，Angular路由匹配不到对应组件时会自动跳转内置404页。需要在路由表中添加规则：{ path: '', component: UserLandingPageComponent }
• 部署场景下的404：如果是生产部署后访问非根路径触发404，需要配置服务器将所有非静态资源请求重定向到index.html，否则路由刷新时会直接请求服务器对应路径，找不到资源返回404
• 资源加载404：检查index.html中Google Maps脚本的API Key，确认已经替换成自己账号生成的有效Key，当前代码中使用的占位KeyMY_KEY会触发接口权限校验失败，间接导致资源加载报错

2. sanitization识别报错修复 #

• 组件未注入对应服务：当前模板中直接调用的sanitization.bypassSecurityTrustStyle方法，需要依赖Angular的DomSanitizer服务才能生效。在组件TS文件中按以下步骤修改：
  • 顶部导入服务：import { DomSanitizer } from '@angular/platform-browser';
  • 构造函数中注入实例：

    constructor(public sanitization: DomSanitizer) {
      this.neighbourhoodPlaces = new Array<Place>();
    }
    

  注意必须把sanitization标记为public，模板中才能访问到该实例。

3. Google Maps逻辑的潜在报错点 #

• 类型配置校验：当前tsconfig.app.json中已经将googlemaps加入types数组，配合安装的@types/googlemaps包可以正常为全局google对象提供类型提示，不需要额外调整类型配置
• DOM初始化时机问题：当前代码在ngOnInit生命周期中通过document.getElementById('map')获取地图容器，此时组件DOM还未完全渲染到文档中，会拿到null值导致地图实例创建失败。可以改用@ViewChild模板引用获取容器元素，在ngAfterViewInit生命周期中执行地图初始化逻辑
• 全局对象加载时序问题：index.html中给Google Maps脚本添加了async defer标记，脚本的加载完成时间晚于Angular组件初始化时间，直接在组件中调用google.maps全局对象会抛出google is not defined错误。需要监听脚本加载完成的回调事件，待全局对象挂载完成后再执行附近搜索逻辑
• 请求参数格式错误：当前nearbySearch请求中的radius参数传入了字符串类型的'1500'，Google Places API要求该参数必须为数字类型（单位：米），字符串格式会直接触发INVALID_REQUEST的接口报错
• 空值兼容问题：当前搜索回调没有校验接口返回状态，直接遍历results结果。当接口请求失败时results为null，会触发空指针报错。需要在回调中先判断status === google.maps.places.PlacesServiceStatus.OK，再处理返回结果

4. 目标功能实现参考 #

• 最近20家咖啡店的搜索：只需要将现有nearbySearch请求中的type数组值替换为['cafe']，在回调逻辑中增加计数，取前20条有效结果即可
• 用户当前位置获取：直接调用浏览器原生的navigator.geolocation.getCurrentPosition接口拿到经纬度坐标，替换当前代码中写死的纽约经纬度值即可

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