1. 首頁
  2. 問答
  3. 如何使用照片參考

如何使用照片參考

2016-08-15 57 views
11

這裏是樣品JSON獲得angularjs谷歌的地方的照片：如何使用照片參考

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

來源

2016-08-15 Ericel

+0

你替換爲自己的API密鑰API_KEY一部分？由於鏈接適用於我，所以在使用我的API_KEY時。 –

+0

不要把api鑰匙放在客戶端！ –

回答

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

DEMO

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>

來源

2017-02-20 16:50:30

1

以獲取圖像的方式是這樣的：

<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替換爲您的API密鑰。這應該保密，所以你不要在面向客戶的代碼中魔杖！

您需要做的是在後端通過調用像https://maps.googleapis.com/maps/api/place/photo?photoreference=ENTER_PHOTO_REF_HERE&key=YOUR_API_KEY這樣的URL來獲取所有圖像，將它們保存在服務器本地，並在前端引用本地副本。 優點：

  • 沒有人會知道你的API密鑰，並能夠濫用它。
  • 您將能夠緩存圖像，並在下一次需要相同的圖像 - 您可以通過再次調用API從緩存中獲取它，而不是浪費配額和時間。

來源

2017-02-19 13:01:55

相關問題

 相關問題