如何在angualr js中的iframe中插入經度和緯度？

-1

我正在使用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>

來源

2016-12-27 Usman Iqbal

現在的工作，你需要用的網址爲一種方法，使其成爲可信的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); 
    }

來源

2016-12-27 06:49:38 Sajan

禁止錯誤無法訪問本地服務器 –

不工作bro –

@UsmanIqbal bro請立即檢查 – Sajan

使用NG-SRC，而不是SRC。

出於安全原因，您無法連接源屬性中的URL：您必須在作用域變量的Javascript中連接URL。 fullURL，然後ng-src =「{{fullURL}}」。

如果嚴格上下文轉義（SCE）已啓用 - 並且Angular v1.2隨附SCE默認啓用 - 您需要將URL列入白名單。

參考1 Angular js scope var value in iframe

來源

2016-12-27 07:02:19 sagar

它已經在另外一個問題得到回答

AngularJS multiple expressions concatenating in interpolation with a URL

更多細節 Strict Contextual Escaping

來源

2016-12-27 07:04:54

這是我的導師做

在我的控制器功能，我是越來越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>

它的工作原理就像一個魅力

來源

2016-12-27 10:57:08

@ aravind.udayashankara親愛的看看 –

如何在angualr js中的iframe中插入經度和緯度？

回答

相關問題