谷歌地图在一个框架中，因为它将'X-Frame-Options'设置为'sameorigin'角度4答案

【问题标题】：google map in a frame because it set 'X-Frame-Options' to 'sameorigin' angular 4谷歌地图在一个框架中，因为它将'X-Frame-Options'设置为'sameorigin'角度4
【发布时间】：2018-08-14 12:27:11
【问题描述】：

我正在使用以下行加载 iframe，如图所示。我收到以下错误。如何解决

this.mapUrl = "https://maps.google.com/maps?q="+this._auctionDetails.AuctionDetail.Latitude +","+this._auctionDetails.AuctionDetail.Longitude+"&hl=es;z=14&amp;output=embed";

加载页面时出现错误。这是我在 html 中的 i 框架代码。我正在使用管道。

<iframe [src]="mapUrl | safe" width="100%" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

【问题讨论】：

标签： angular typescript iframe

【解决方案1】：

你像这样使用你的 iframe。

this.mapUrl = "https://maps.google.com/maps/embed/v1/place?key={{API-KEY}}&q="+this._auctionDetails.AuctionDetail.Latitude +","+this._auctionDetails.AuctionDetail.Longitude+"";

然后它将完美加载。其余代码没问题。希望这会有所帮助

【讨论】：

【解决方案2】：

迟到者，但也许它会帮助某人。尝试从谷歌地图 API 仪表板启用嵌入 API。它为我解决了这个问题。

【讨论】：