Question

请跟我说，因为我是N00b。我正在使用Firebase和AngularJS创建一个Ionic应用程序我想要做的是使用从数据库中绘制的地址位置加载地图。（硬编码不是一种选择）我可以像这样做一个外部链接：

<a href="http://maps.google.com/?q={{task.street}}, {{task.city}}, {{task.zip}}">See Location</a>

它有效，但它打开了网页谷歌地图（这对应用程序不实用）所以，我尝试在iframe中嵌入地图，如下所示：

 <iframe
         ng-controller="BrowseCtrl"
         width="100%"
         height="450px"
         frameborder="0" style="border:0"
         src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
       </iframe>

但我无法让它发挥作用。我的猜测是因为iframe位于页面的“外部”而没有识别动态数据。有谁知道如何动态地将地址加载到嵌入式地图中，还是有更好的方法来使用AngularJS？理想情况下，我希望应用程序本身具有所有可用功能，即使这意味着必须转到付费服务。但是现在，我试图简单地嵌入地图。

提前致谢！

Update1

我还没有找到修复程序，但我认为我发现了问题。在控制台中有一个错误说：“需要一个可信任的值”，然后链接到这个，docs.angularjs.org / api / ng / service / $ .s我将不得不阅读并回来

更新2

我将此添加到Controller：

$scope.trustedURL = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxx");

并将html更改为：

 <iframe

     width="100%"
     height="450px"
     frameborder="0" style="border:0"
     ng-src="{{trustedURL}}" allowfullscreen>
   </iframe>

这修复了错误“需要可靠值”，但我仍然得到相同的结果 - 具有随机生成位置的地图。它无法识别{{}}中动态加载的数据。任何想法???

Answer 1

尝试使用ng-src代替 src

 <iframe
         ng-controller="BrowseCtrl"
         width="100%"
         height="450px"
         frameborder="0" style="border:0"
         ng-src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
  </iframe>

Answer 2

像这样使用：

<iframe
    ng-src="{{ 'https://www.google.com/maps/embed/v1/place?q=' + task.street + ',' + task.city + ',' + task.zip + '&key=xxxxxxxx' }}">
</iframe>

Answer 3

第1步

HTML在html中使用

 [src]=methodToGetURL()

methodToGetURL：从组件文件

返回httl url的函数

示例 - iframe

[src]="methodToGetURL()" allowfullscreen  /iframe'

步骤2）组件文件

添加DomSanitizer：

import {DomSanitizer} from '@angular/platform-browser';

功能：

methodToGetURL() `enter code here`{
        return this.domSanitizer.bypassSecurityTrustResourceUrl('https:Your  URL here');
}

如何在嵌入式谷歌地图中动态加载地址？

3 个答案: