Angular中动态嵌入Google Maps地图失败问题及报错排查

错误原因 #

Angular内置的XSS安全防护机制会拦截未经过安全验证的资源URL，你直接将动态生成的字符串作为iframe的[src]绑定值，被判定为不安全资源，因此触发NG0904错误。

具体解决方案 #

1. 导入Angular安全模块

在组件的TypeScript文件顶部，引入安全处理相关的类：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

2. 注入DomSanitizer服务

在组件构造函数中注入DomSanitizer，用于处理安全URL：

constructor(
  private route: ActivatedRoute,
  private boatsService: BoatsService,
  private sanitizer: DomSanitizer // 新增安全服务注入
) {}

3. 重构地图URL逻辑

将动态生成的URL转换为Angular认可的安全资源URL，同时修正原代码中的笔误：

// 新增组件属性存储安全URL
mapUrl: SafeResourceUrl | undefined;

ngOnInit(): void {
  this.route.paramMap.subscribe((params: ParamMap) => {
    this.productId = Number(params.get('productId'));
    this.boatName = params.get('name') as string;
    document.title = `${this.boatName} || Boat and Share`;

    this.boatsService.getProductById(this.productId).subscribe(boat => {
      this.boat = boat;
      // 加载产品后更新安全地图URL
      this.mapUrl = this.getSafeMapUrl();
    });
  });
}

// 私有方法生成并处理安全URL
private getSafeMapUrl(): SafeResourceUrl {
  const coords = `${this.boat.latitude},${this.boat.longitude}`;
  const rawMapUrl = `https://www.google.com/maps/embed/v1/place?key=${environment.apiMapsKey}&q=${coords}`;
  // 标记URL为可信资源
  return this.sanitizer.bypassSecurityTrustResourceUrl(rawMapUrl);
}

4. 更新HTML模板绑定

将iframe的[src]绑定到处理后的安全URL属性：

<div>
  <iframe
    allowfullscreen
    height="450"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    [src]="mapUrl"
    *ngIf="mapUrl" <!-- 空值判断避免加载前报错 -->
    style="border:0"
    width="600"
  ></iframe>
</div>

补充说明 #

使用bypassSecurityTrustResourceUrl时，需确保生成的URL完全由你控制（无用户输入注入风险），避免引入XSS漏洞。如果需要支持城市名查询，可扩展getSafeMapUrl方法，根据传入参数选择坐标或城市名构造原始URL。

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