Question

我正在创建一个从服务器加载图像，数据和经度和纬度的应用程序。我使用了这个json数据并解析它并在html中显示。 Everythings工作正常..但我需要将经度和经度添加到html页面中指定的URL，该网址是从JSON解析的。

对于ex我试过：

<iframe 
                            width="300" 
                            height="170" 
                            frameborder="0" 
                            scrolling="no" 
                            marginheight="0" 
                            marginwidth="0" 
                            src="https://maps.google.com/maps?q="+details.latitude+","+details.longitude+"&hl=es;z=14&amp;output=embed">
                           </iframe>

我在这里获得经纬度：

details.latitude

和

details.longitude

如何在网址中包含数据.. 我得到一个错误：

compiler.js：466未捕获错误：模板解析错误：意外关闭标签“iframe”。标签已经存在时可能会发生被另一个标签关闭。有关详情，请参阅 https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags（“s？q =”details.latitude“，”details.longitude“＆amp; hl = es; z = 14＆amp; output = embed”＆gt; [错误 - ＆gt;]

Answer 1

首先，你不应该在另一个双引号中使用双引号，你需要做的第二件事就是将你在details.latitude和details.longitude中获得的数据绑定到html页面中。< / p>

你可以传递一个函数并获取url试试这个：

在你的component.ts中：

someFn(param1,param2){  //call this function from html
   let url = `https://maps.google.com/maps?q=${param1},${param2}&hl=es;z=14&amp;output=embed` // notice carefully the backticks dont confuse it with quotes ('' or " ")
   return url
}

<iframe>
    ...
[src]="someFn(details.latitude,details.longitude)">
</frame>

Answer 2

首先，我们无法在iframe中动态绑定纬度和经度，这会给我们带来错误因此，如果您使用的是角度，则需要在ts文件中做一些逻辑从“ @ angular / platform-browser”导入{DomSanitizer，SafeResourceUrl}；然后分配一个变量mapurl：SafeResourceUrl 在NgOnint中： this.mapurl = this.dom.bypassSecurityTrustResourceUrl（https://maps.google.com/maps?q=${lat},${lng}&hl=es;z=14&output=embed）//您需要从后端分配lat和lng } 在iframe中的html中，只需传递[src] =“ mapurl” 您将获得具有所需输出的地图

如何使用angular ngFor在iframe地图网址中动态添加纬度和经度？

2 个答案: