如何修复 Google Maps Platform 拒绝了您的请求。无效的请求。意外的参数“amp%3Bkey”答案

【问题标题】：How to fix Google Maps Platform rejected your request. Invalid request. Unexpected parameter 'amp%3Bkey'如何修复 Google Maps Platform 拒绝了您的请求。无效的请求。意外的参数“amp%3Bkey”
【发布时间】：2019-06-25 14:30:38
【问题描述】：

角度误差

Google Maps Platform 拒绝了您的请求。无效的请求。意外的参数“amp%3Bkey”。

在控制台中

获取 https://www.google.com/maps/embed/v1/place?q=19.499201,77.656332&key=APIKEY 400

HTML 代码

<iframe width="100%" height="150" frameborder="0" style="border:0" [src]="location(details)"></iframe>

TS 代码

location(details:any){
    let location = `https://www.google.com/maps/embed/v1/place?q=${details.longitude},${details.latitude}&amp;key=<apiKey>`;
    return this.sanitizer.bypassSecurityTrustResourceUrl(location);
}

我正面临

的问题

bypassSecurityTrustResourceUrl 函数转换字符串',' 逗号到“%3B”

【问题讨论】：

标签： angular iframe

【解决方案1】：

在上面的示例中，我将 iframe 源地址与 ResourceUrl sanitizer 一起使用，这导致字符串 ',' 以某种方式转换为 '%3B'。最后哪个不起作用。所以我使用了从 ts 文件中清理 HTML 的替代方法，如下所示。

HTML

<div class="map-box" [innerHtml]="Location(Details) | safe: 'html'">

Location(details:any){
        let locationIframe = `<iframe width="100%" height="150" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=${details.longitude},${details.latitude}&amp;key=${this.gmapApiKey}" > </iframe>`;
        return locationIframe;
    }

管道 -> 安全：'html'

return this.sanitizer.bypassSecurityTrustHtml(value);

【讨论】：