如何在html表格行中向iframe添加动态纬度和经度

Posted 2023-03-05

【中文标题】如何在html表格行中向iframe添加动态纬度和经度

【英文标题】：how to add dynamic latitude and longitude to ifram in html table row

【发布时间】：2021-02-15 02:18:29

【问题描述】：

在 angular.js 中，我正在尝试使用代码 iram 谷歌地图

<tr><td><iframe id="myIframe" src="https://maps.google.com/maps?q=rfq.latitude,rfq.longitude&hl=es;z=14&amp;output=embed"   frameborder="0"></iframe></td></tr>

但我收到rfq.latitude and rfq.longitude 的错误，如何在我的表格行中连接 iFrame 中的 url 字符串

【问题讨论】：

您收到的错误是什么？

不加载地图，但是当我静态添加 lat 和 lng 时，它会像

想要使用来自 rfq.latitude 的值

您确定属性latitude 和longitude 在rfq 对象中可用吗？它是如何分配的？

是的，它可用

【参考方案1】：

您可以尝试使用 Angular DomSanitizer 清理 URL。这是一个快速管道

safe.pipe.ts

import  Pipe, PipeTransform  from "@angular/core";
import  DomSanitizer, SafeResourceUrl  from "@angular/platform-browser";

@Pipe(
  name: "safe",
  pure: true
)
export class SafePipe implements PipeTransform 
  constructor(protected sanitizer: DomSanitizer) 

  public transform(value: any): SafeResourceUrl 
    console.log(`Pipe Called!`);
    return this.sanitizer.bypassSecurityTrustResourceUrl(value);
  

app.component.ts

export class AppComponent 
  rfq = 
    latitude: 43.182233,
    longitude: -72.167288
  ;

app.component.html

<table>
  <tr>
    <td>
      <iframe id="myIframe"
        [src]="'https://maps.google.com/maps?q='+rfq.latitude+','+rfq.longitude+'&hl=es;z=14&amp;output=embed' | safe"
         
         
        frameborder="0"
      ></iframe>
    </td>
  </tr>
</table>

工作示例：Stacblitz

【讨论】：

收到此错误 core.js:6014 错误错误：未捕获（承诺中）：错误：模板解析错误：找不到“安全”管道

你需要先用ng generate pipe safe创建safepipe。并将safe.pipe.ts的内容替换为答案中的内容。

我已经创建了您在回答中提到的文件，但无法正常工作

我怎样才能把我的地图放在行的中心.. 目前它出现在左边，我想把它给全宽度

@ShoaibAnwar：这是一个 CSS 特定问题，有多种解决方案。你可以开始here。另外，如果您是 Angular 的新手，我建议您通过他们的tutorial。它介绍了一些基础知识。