英文:
How can I Embed a Google maps map dynamically in Angular?
问题
以下是您提供的内容的翻译:
我正在尝试在产品页面动态显示地图,使用纬度和经度坐标或只是城市名称。我无法让地图显示出来。
到目前为止,这是我拥有的内容,这是HTML部分:
<div>
<iframe
allowfullscreen
height="450"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
[src]="getMapUrl()"
style="border:0"
width="600"
></iframe>
</div>
这是TypeScript部分:
ngOnInit(): void {
this.route.paramMap.subscribe((params: ParamMap) => {
this.productId = Number(params.get('productId'));
this.boatName = params.get('name') as string;
console.log(this.productId + ": productId");
console.log(this.boatName + ": boatName");
// console.log("Coords: " + this.boat.latitude + ", " + this.boat.latitude);
document.title = `${this.boatName} || Boat and Share`;
// 调用产品服务以获取产品详情
this.boatsService.getProductById(this.productId).subscribe(boat => {
this.boat = boat;
console.log("The boat: " + this.boat.name + ', ' + this.boat.boatType);
this.getMapUrl();
});
});
}
getMapUrl(): string {
const latitude = this.boat.latitude;
const longitude = this.boat.longitude;
return `https://www.google.com/maps/embed/v1/place?key=${environment.apiMapsKey}&q=${this.boat.latitude},${this.boat.longitude}`;
}
非常感谢您的帮助!
编辑:
我在浏览器控制台中收到的错误信息如下:
ERROR Error: NG0904: unsafe value used in a resource URL context (see https://g.co/ng/security#xss)
at ɵɵsanitizeResourceUrl (core.mjs:7391:11)
at elementPropertyInternal (core.mjs:10839:37)
at Module.ɵɵproperty (core.mjs:13584:9)
at ProductInfoComponent_div_0_Template (product-info.component.html:153:15)
at executeTemplate (core.mjs:10481:9)
at refreshView (core.mjs:10366:13)
at refreshEmbeddedViews (core.mjs:11381:17)
at refreshView (core.mjs:10390:9)
at refreshComponent (core.mjs:11427:13)
at refreshChildComponents (core.mjs:10157:9)
英文:
I’m trying to dynamically show a map on the product page wit latitude and longitude coordinates or just city name. I cant get the map to show
This is what I have so far, this is the html:
<div>
<iframe
allowfullscreen
height="450"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
[src]="getMapUrl()"
style="border:0"
width="600"
></iframe>
</div>
this is the typescript:
ngOnInit(): void {
this.route.paramMap.subscribe((params: ParamMap) => {
this.productId = Number(params.get('productId'));
this.boatName = params.get('name') as string;
console.log(this.productId + ": productId")
console.log(this.boatName + ": boatName")
// console.log("Coords: " + this.boat.latitude + ", " + this.boat.latitude);
document.title = `${this.boatName} || Boat and Share`;
// call the product service to fetch the product details
this.boatsService.getProductById(this.productId).subscribe(boat => {
this.boat = boat;
console.log("The boat: " + this.boat.name + ', ' + this.boat.boatType)
his.getMapUrl()
});
});
}
getMapUrl(): string {
const latitude = this.boat.latitude;
const longitude = this.boat.longitude;
return `https://www.google.com/maps/embed/v1/place?key=${environment.apiMapsKey}&q=${this.boat.latitude},${this.boat.longitude}`;
}
All help is highly appreciated!
EDIT:
The errors I get in the console in the browser
ERROR Error: NG0904: unsafe value used in a resource URL context (see https://g.co/ng/security#xss)
at ɵɵsanitizeResourceUrl (core.mjs:7391:11)
at elementPropertyInternal (core.mjs:10839:37)
at Module.ɵɵproperty (core.mjs:13584:9)
at ProductInfoComponent_div_0_Template (product-info.component.html:153:15)
at executeTemplate (core.mjs:10481:9)
at refreshView (core.mjs:10366:13)
at refreshEmbeddedViews (core.mjs:11381:17)
at refreshView (core.mjs:10390:9)
at refreshComponent (core.mjs:11427:13)
at refreshChildComponents (core.mjs:10157:9)
答案1
得分: 1
错误是因为 Angular 认为从 getMapUrl
返回的数据使用存在XSS 攻击的风险。
尝试将 getMapUrl
返回的值包装在 sanitizer.bypassSecurityTrustUrl()
中:
getMapUrl(): string {
const latitude = this.boat.latitude;
const longitude = this.boat.longitude;
return sanitizer.bypassSecurityTrustUrl(`https://www.google.com/maps/embed/v1/place?key=${environment.apiMapsKey}&q=${this.boat.latitude},${this.boat.longitude}`);
}
这会告诉 Angular 你想要绕过安全性并使用不安全的值。
英文:
The error you are getting is because Angular deems the use of the returned data from getMapUrl
to be vulnerable to a XSS attack.
Try wrapping your return value in getMapUrl
in sanitizer.bypassSecurityTrustUrl()
getMapUrl(): string {
const latitude = this.boat.latitude;
const longitude = this.boat.longitude;
return sanitizer.bypassSecurityTrustUrl(`https://www.google.com/maps/embed/v1/place?key=${environment.apiMapsKey}&q=${this.boat.latitude},${this.boat.longitude}`);
}
This tells Angular that you want to bypass security and use the unsafe value.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论