如何在角度js的iframe中插入经度和纬度？答案

【问题标题】：How to insert longitude & latitude in iframe in angular js?如何在角度js的iframe中插入经度和纬度？
【发布时间】：2016-12-27 06:45:21
【问题描述】：

嘿

我正在使用 angular 并尝试在其中实现 iframe。我尝试了很多方法来插入来自数据库的longitude 和latitude，但是每当尝试编写这样的内容时，我都会出错。

我尝试过的

<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q={{product.mall.lat}},{{product.mall.long}}&amp;key= key"  allowfullscreen></iframe>

当我尝试上述方法时出现此错误

[$interpolate:noconcat]

普通iframe

<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=40.7127837,-74.0059413&amp;key= Akey"  allowfullscreen></iframe>

【问题讨论】：

标签： javascript angularjs google-maps iframe maps

【解决方案1】：

使用 ng-src 代替 src。

出于安全原因，您不能在源属性内连接 URL：您必须在范围变量中连接 Javascript 中的 URL，例如fullURL 然后是 ng-src="{{fullURL}}"。

如果启用了严格上下文转义 (SCE) - 并且 Angular v1.2 默认启用了 SCE - 您需要将 URL 列入白名单。

参考1 Angular js scope var value in iframe

【讨论】：

【解决方案2】：

已经在另一个问题中回答了

AngularJS multiple expressions concatenating in interpolation with a URL

更多细节 Strict Contextual Escaping

【讨论】：

【解决方案3】：

这就是我的导师所做的

在我得到long和lat的控制器功能中，他做了这样的事情

$scope.single_product = function (product_id) {
        $http.get('url' + product_id + '?expand=product_variants,product_variant_options,photos,shop,mall',
                {headers:
                            {'Content-Type': 'application/x-www-form-urlencoded',
                                'Authorization': $rootScope.keyword_auth_token}
                })
                .success(function (data) {
                    $scope.product = data;
                    $scope.photo = $scope.product.photos;   //Storing photos in phot object
                    for (var i = 0; i < $scope.photo.length; i++) {
                        slides.push({path: $scope.photo[i].path, id: currIndex++}); //I already mentioned slides as an array
                    }
                    console.log(slides);
                    console.log($scope.product);
                    var compile_map = '<iframe width="100%" height="250" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q='+$scope.product.mall.lat+','+$scope.product.mall.long+'&amp;key= AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0"  allowfullscreen></iframe>';
                    angular.element($document[0].querySelector('#map_image')).append(compile_map); //This function will run only and load the html if it has long and lat
                })
                .error(function (data) {
                    console.log(data);
                });
    };

然后在html 就这样

<div id="map_image"></div>

它就像一个魅力

【讨论】：

@aravind.udayashankara 亲爱的看看

【解决方案4】：

现在它的工作，你需要将 url 包装到一个方法中，使其成为一个受信任的 url 源

在html中

     <iframe width="100%" height="250" frameborder="0" style="border:0" ng-src='{{getTrustedUrl("https://www.google.com/maps/embed/v1/place?q="+product.mall.lat+","+product.mall.long+"&key=AIzaSyCaG_LpOazepPve-DlVH1TuxxkBVseOGd0")}}' allowfullscreen>

    </iframe>

将此功能添加到您的控制器

  $scope.getTrustedUrl = function(src) {
  return $sce.trustAsResourceUrl(src);
  }

【讨论】：