Question

我正在尝试从Google Map Street View API获取图片，这是我的服务：

.factory('WeatherService', function($http) {
   var GOOGLEMAP_KEY ="AIzaSyBZRxxrYsNGfIfUbGRCT1k948wAV-rwLGY";

   var urlGoogleStreetView = 'https://maps.googleapis.com/maps/api/streetview?key=' + GOOGLEMAP_KEY + '&size=480x320';

   return {
     pictureLocation: function (lat,lng,h,p){
         return $http.get(urlGoogleStreetView + '&location=' + lat + ',' + lng + '&heading=' + h + '&pitch=' + p);
     }
   };
});

这就是我在控制器中调用它的方式：

$scope.imageSource=WeatherService.pictureLocation(46.414382,10.013988,151.78,-0.76);

在视图中显示损坏的图像并给我“GET http://localhost:8100/%7B%7D 404（未找到）”错误，但是当我手动调用它时

$scope.imageSource="https://maps.googleapis.com/maps/api/streetview?key=AIzaSyBZRxxrYsNGfIfUbGRCT1k948wAV-rwLGY&size=480x320&location=46.414382,10.013988&heading=151.78&pitch=-0.76";

图像加载完美。任何人都可以帮助我吗？

这是我的HTML

<ion-content scroll="true" ng-controller="HomeCtrl">

  <h3>{{city}}</h3>
  <h5><weather-icon icon="current.currently.icon" id="current-icon"></weather-icon> {{current.currently.summary}}</h5>
  <span class="large">{{current.currently.temperature}} &deg; </span><br>
  <img ng-src="{{imageSource}}">

</ion-content>

Answer 1

如果你url-decode％7B％7D它会给你{}，这意味着$ scope.imageSource返回一个空对象。您需要检查WeatherService.pictureLocation(46.414382,10.013988,151.78,-0.76);

返回图像的路径，而不是空对象。

Answer 2

我的英语很差，但我会尽力解释。

ng-src应该等于url字符串。在$scope.imageSource=WeatherService.pictureLocation(46.414382,10.013988,151.78,-0.76);中，$scope.imageSource是图片数据，而不是网址字符串。

$scope.imageSource="https://maps.googleapis.com/maps/api/streetview?key=AIzaSyBZRxxrYsNGfIfUbGRCT1k948wAV-rwLGY&size=480x320&location=46.414382,10.013988&heading=151.78&pitch=-0.76";

中的

， $scope.imageSource是一个网址字符串。

因此，使用服务会显示错误。

所以你可以像这样编辑你的代码

.factory('WeatherService', function() {
var GOOGLEMAP_KEY ="AIzaSyBZRxxrYsNGfIfUbGRCT1k948wAV-rwLGY";

var urlGoogleStreetView = 'https://maps.googleapis.com/maps/api/streetview?key=' + GOOGLEMAP_KEY + '&size=480x320';

return {
 pictureLocation: function (lat,lng,h,p){
     return urlGoogleStreetView + '&location=' + lat + ',' + lng + '&heading=' + h + '&pitch=' + p;
     }
 };
});

离子倾斜从http请求加载图像

2 个答案: