集成AGM到Bootstrap5时遇expressionChangedAfterItHasBeenChecked错误及地图不显示求助

嘿，我来帮你排查这个AGM地图不显示的问题！结合你提到的Angular v5.2.9、agm/core v1.0.0-beta.2版本，还有deviceId参数的URL操作相关问题，咱们一步步来定位解决：

1. 先确认AGM的基础配置是否到位 #

AGM想要正常工作，首先得确保模块导入和Google Maps API密钥配置正确：

• 检查你的AppModule里是否正确导入了AgmCoreModule，并且传入了有效的Google Maps API密钥：

  import { AgmCoreModule } from '@agm/core';
  
  @NgModule({
    imports: [
      // 其他模块...
      AgmCoreModule.forRoot({
        apiKey: '你的Google Maps API密钥'
      })
    ]
  })
  export class AppModule { }
  

• 另外要注意：这个版本的AGM依赖Google Maps JavaScript API v3，你需要在Google Cloud控制台里确保你的API密钥已经启用了Maps JavaScript API，并且没有设置错误的IP/域名限制。

2. 排查deviceId参数的URL操作问题 #

你提到问题和deviceId参数有关，那重点要确认这个参数的获取和后续数据传递是否正确：

• 如果deviceId是从路由参数里获取的，要确保组件里正确订阅了路由参数：

  import { ActivatedRoute } from '@angular/router';
  
  constructor(private route: ActivatedRoute) {}
  
  ngOnInit() {
    this.route.params.subscribe(params => {
      const deviceId = params['deviceId'];
      // 先在这里console.log(deviceId)验证是否能拿到正确的值
      // 然后用这个deviceId请求设备的坐标数据，确保返回的lat/lng是合法数字
    });
  }
  

• AGM的latitude和longitude属性必须是数字类型，如果因为deviceId获取失败导致坐标是undefined或者字符串，地图肯定没法渲染。

3. 检查Bootstrap 5的样式冲突 #

Bootstrap的全局样式很可能影响地图显示，这是常见的坑：

• 给AGM地图容器设置明确的高度！AGM地图默认需要一个有高度的容器才能显示，比如在模板里：

  <div style="height: 400px; width: 100%;">
    <agm-map [latitude]="deviceLat" [longitude]="deviceLng">
      <agm-marker [latitude]="deviceLat" [longitude]="deviceLng"></agm-marker>
    </agm-map>
  </div>
  

• 排查是否有Bootstrap的类给地图容器设置了display: none、visibility: hidden或者overflow: hidden，导致地图被隐藏。可以暂时注释掉Bootstrap的样式引用，测试地图是否能正常显示，来确认是不是样式冲突。

4. 重点分析浏览器的具体报错信息 #

你说浏览器有报错，这是最关键的线索，不同的报错对应不同的问题：

• 如果是Google Maps JavaScript API error: InvalidKeyMapError：说明API密钥无效或者没启用对应的API；
• 如果是Cannot read property 'lat' of undefined：说明你传给AGM的坐标值是undefined，和deviceId获取的数据有关；
• 如果是AGM: Did not find Angular core library：可能是依赖版本冲突，不过Angular5和agm beta2理论上是兼容的，可以尝试重新安装依赖。

5. 修复可能的依赖版本问题 #

虽然Angular5和agm/core v1.0.0-beta.2大体兼容，但还是可以排查下依赖冲突：

• 运行npm ls @agm/core和npm ls @angular/core，看看有没有版本不匹配的警告；
• 尝试清除依赖重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

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