如何使用照片参考获取谷歌在angularjs中的照片

时间：2016-08-15 13:08:56

标签： javascript angularjs google-maps-api-3

以下是json示例：

{
   "html_attributions" : [],
   "results" : [
      {
         "geometry" : {
            "location" : {
               "lat" : -33.86755700000001,
               "lng" : 151.201527
            },
            "viewport" : {
               "northeast" : {
                  "lat" : -33.86752310000001,
                  "lng" : 151.2020721
               },
               "southwest" : {
                  "lat" : -33.8675683,
                  "lng" : 151.2013453
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
         "id" : "ce4ffe228ab7ad49bb050defe68b3d28cc879c4a",
         "name" : "Sydney Showboats",
         "opening_hours" : {
            "open_now" : true,
            "weekday_text" : []
         },
         "photos" : [
            {
               "height" : 750,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/107415973755376511005/photos\"\u003eSydney Showboats\u003c/a\u003e"
               ],
               "photo_reference" : "CoQBcwAAALJu5RtxzHQOMmymod7ZC7pBdmvu2B9CNM--jW4JHmYSSfUaAl8N9bKtJ-s6jnnx34vk4HMiTQMAmgTxqtxMhXpz-PHWsLhKMbueA_1-JVzcuRg8xZc4winHSETwpgQ0Z1E7SNR8FKJidbm2x8tCVdDrez1Kf4uYXBXiIuq9XWTWEhDtwkHhzUfrhlY173SOjrH3GhRqePzj-208MHwun5JZXNueHVGUzw",
               "width" : 1181
            }
         ],
         "place_id" : "ChIJjRuIiTiuEmsRCHhYnrWiSok",
         "rating" : 4.3,
         "reference" : "CnRkAAAAQH-eVS3qC5X1iGf5VLdWVPrh4B8NsOaH-h3hEd3dzkTHzz9an9MYcUnN29-rzgVWRGfeS0_IwnoDXSLguQW8Uj6MS8BWr2o5pAQ55mNRO5Z7AiR7fIc2JzZT716Nx_m4uI58UxPdlc9hJ3uJMyNUihIQ2j7VKjkgPEwmQ8gVe5ErSRoU4toUaHai404Dc_B079CrniR_o5Y",
         "scope" : "GOOGLE",
         "types" : [
            "travel_agency",
            "restaurant",
            "food",
            "point_of_interest",
            "establishment"
         ],
         "vicinity" : "King Street Wharf 5, Lime Street, Sydney"
      }
 ],
   "status" : "OK"
}

我在控制器中将其作为对象：

angular.module('goafricaApp')
  .controller('MainCtrl',  function ($rootScope, $scope, $http) {
 dataservice.getPlaces().then(function(response){
      $scope.places = response.data.results;
 });
});

这是我的模板：

<div class="row">
    <md-content>
       <div  class="col-md-4" ng-repeat="place in places" ng-if="$index < 3">
      <md-card>

     <span ng-repeat="photo in place.photos">
        <img ng-src="{{SHOULD BE PHOTO URL}}"> 
        {{photo.photo_reference}}
       </span>
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline text-center">{{ place.vicinity }}</span>
          </md-card-title-text>
        </md-card-title>
      </md-card>

      </div>

  </md-content>
     </div>

我确实很好地获得了照片参考，但我怎样才能在这里使用照片参考来获取照片。

首先，我觉得这样做是错误的。正如我阅读的谷歌文档，没有直接的方式来引用地方照片。

例如，如果您将以下代码放在浏览器中，您将获得照片，但这只是在页面刷新后生成另一个链接到照片的网址。

https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRtAAAATLZNl354RwP_9UKbQ_5Psy40texXePv4oAlgP4qNEkdIrkyse7rPXYGd9D_Uj1rVsQdWT4oRz4QrYAJNpFX7rzqqMlZw2h2E2y5IKMUZ7ouD_SlcHxYq1yL4KbKUv3qtWgTK0A6QbGh87GB3sscrHRIQiG2RrmU_jF4tENr9wGS_YxoUSSDrYjWmrNfeEHSGSc3FyhNLlBU&key=YOUR_API_KEY

2 个答案:

答案 0 :(得分：3)

一些观察结果：

  • ng-repeat应为ng-repeat="photo in places[0].photos"而不是ng-repeat="photo in place.photos"，因为$scope.places等于response.data.results。
  • 在模块中注入ngSanitize作为依赖项，并在视图中使用ng-bind-html将photo.html_attributions[0]显示为link。

  • 只需用下面的参数替换即可显示谷歌照片的参考。

    • 的 photoreference
    • maxwidth - 1到1600之间的int值

    • key - YOUR_API_KEY

      然后，完整URL应该像：

      https://maps.googleapis.com/maps/api/place/photo?maxwidth=MAX_WIDTH&photoreference=PHOTO_REFERENCE&key=YOUR_API_KEY

<强>样本 

var myApp = angular.module('myApp',['ngSanitize']);

myApp.controller('MyCtrl',function($scope) {
    $scope.places = [
      {
         "geometry" : {
            "location" : {
               "lat" : -33.86755700000001,
               "lng" : 151.201527
            },
            "viewport" : {
               "northeast" : {
                  "lat" : -33.86752310000001,
                  "lng" : 151.2020721
               },
               "southwest" : {
                  "lat" : -33.8675683,
                  "lng" : 151.2013453
               }
            }
         },
         "icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
         "id" : "ce4ffe228ab7ad49bb050defe68b3d28cc879c4a",
         "name" : "Sydney Showboats",
         "opening_hours" : {
            "open_now" : true,
            "weekday_text" : []
         },
         "photos" : [
            {
               "height" : 750,
               "html_attributions" : [
                  "\u003ca href=\"https://maps.google.com/maps/contrib/107415973755376511005/photos\"\u003eSydney Showboats\u003c/a\u003e"
               ],
               "photo_reference" : "CoQBcwAAALJu5RtxzHQOMmymod7ZC7pBdmvu2B9CNM--jW4JHmYSSfUaAl8N9bKtJ-s6jnnx34vk4HMiTQMAmgTxqtxMhXpz-PHWsLhKMbueA_1-JVzcuRg8xZc4winHSETwpgQ0Z1E7SNR8FKJidbm2x8tCVdDrez1Kf4uYXBXiIuq9XWTWEhDtwkHhzUfrhlY173SOjrH3GhRqePzj-208MHwun5JZXNueHVGUzw",
               "width" : 1181
            }
         ],
         "place_id" : "ChIJjRuIiTiuEmsRCHhYnrWiSok",
         "rating" : 4.3,
         "reference" : "CnRkAAAAQH-eVS3qC5X1iGf5VLdWVPrh4B8NsOaH-h3hEd3dzkTHzz9an9MYcUnN29-rzgVWRGfeS0_IwnoDXSLguQW8Uj6MS8BWr2o5pAQ55mNRO5Z7AiR7fIc2JzZT716Nx_m4uI58UxPdlc9hJ3uJMyNUihIQ2j7VKjkgPEwmQ8gVe5ErSRoU4toUaHai404Dc_B079CrniR_o5Y",
         "scope" : "GOOGLE",
         "types" : [
            "travel_agency",
            "restaurant",
            "food",
            "point_of_interest",
            "establishment"
         ],
         "vicinity" : "King Street Wharf 5, Lime Street, Sydney"
      }
 ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="photo in places[0].photos">
        <img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth={{photo.width}}&photoreference={{photo.photo_reference}}"/>
        <span ng-bind-html="photo.html_attributions[0]"></span>
        <span>{{photo.photo_reference}}</span>
    </div>
</div>

答案 1 :(得分：1)

获取图像的方法是这样的：

new.var <- rowSums(new.vars)

然而 - 请勿执行此操作！ 您明白了 - 您需要确保将<div class="row"> <md-content> <div class="col-md-4" ng-repeat="place in places" ng-if="$index < 3"> <md-card> <span ng-repeat="photo in place.photos"> <img ng-src="https://maps.googleapis.com/maps/api/place/photo?photoreference={{photo.photo_reference}}&key=YOUR_API_KEY" class="md-card-image"> </span> <md-card-title> <md-card-title-text> <span class="md-headline text-center">{{ place.vicinity }}</span> </md-card-title-text> </md-card-title> </md-card> </div> </md-content> </div> 替换为您的API密钥。这应该保密，所以你不要在面向客户端的代码中使用它！

您需要做的是，在后端，通过调用YOUR_API_KEY等网址获取所有图像，将它们本地保存在服务器上，并在前端引用本地副本。 优点：

  • 没有人会知道您的API密钥，并且可以滥用它。
  • 您将能够缓存图像，下次需要相同的图像时 - 您可以通过再次调用API从缓存而不是浪费的配额和时间获取它。
相关问题
最新问题