如何使用照片参考在 angularjs 中获取谷歌位置照片答案

【问题标题】：How to get google place photo in angularjs using the photo reference如何使用照片参考在 angularjs 中获取谷歌位置照片
【发布时间】：2016-12-21 16:41:18
【问题描述】：

这里是示例 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>

我确实很好地得到了照片参考，但是我怎样才能继续使用照片参考来获取照片。

首先我觉得我做错了。正如我阅读的谷歌文档，没有直接的方法来引用地点照片。

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

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

【问题讨论】：

您是否将 API_KEY 部分替换为您自己的 API KEY？由于该链接对我有用，因此在使用我的 API_KEY 时。
不要将api密钥放在客户端！

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

【解决方案1】：

一些观察：

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 - int 值从 1 到 1600
- 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>

【讨论】：

【解决方案2】：

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

<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>

然而 - 不要这样实现它！ 您看 - 您需要确保将 YOUR_API_KEY 替换为 YOUR API KEY。这应该保密，这样您就不会在面向客户端的代码中使用它！

您需要做的是，在后端，通过调用https://maps.googleapis.com/maps/api/place/photo?photoreference=ENTER_PHOTO_REF_HERE&key=YOUR_API_KEY 等url 获取所有图像，将它们保存在本地服务器上，并在前端引用本地副本。好处：

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

【讨论】：