时间戳

首页 > 解决方案 > How to fix Google Maps Platform rejected your request. Invalid request. Unexpected parameter 'amp%3Bkey'

angular - How to fix Google Maps Platform rejected your request. Invalid request. Unexpected parameter 'amp%3Bkey'

问题描述

angular error

Google Maps Platform rejected your request. Invalid request. Unexpected parameter 'amp%3Bkey'.

in console

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

HTML code

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

TS code

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);
}

I am facing the issue with

bypassSecurityTrustResourceUrl function which converts the string ',' comma to '%3B'

.

标签： angulariframe

解决方案

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

HTML

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

TS

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);

推荐阅读