Javascript 如何使用照片引用在angularjs中获取google place照片_Javascript_Angularjs_Google Maps Api 3

Javascript 如何使用照片引用在angularjs中获取google place照片

javascript angularjs google-maps-api-3

Javascript 如何使用照片引用在angularjs中获取google place照片,javascript,angularjs,google-maps-api-3,Javascript,Angularjs,Google Maps Api 3,以下是示例json： { "html_attributions" : [], "results" : [ { "geometry" : { "location" : { "lat" : -33.86755700000001, "lng" : 151.201527 }, "viewport" : {

以下是示例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>

获取图像的方法如下所示：

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


{{place.neighborary}}

但是-不要像这样实现它您看到了-您需要确保将
您的\u API\u密钥
替换为您的API密钥。这应该是保密的，这样你就不会在面向客户的代码中使用它了
您需要做的是，在后端，通过调用像
https://maps.googleapis.com/maps/api/place/photo?photoreference=ENTER_PHOTO_REF_HERE&key=YOUR_API_KEY
，将它们本地保存在服务器上，并在前端引用本地副本。好处：

没有人知道您的API密钥，也不会滥用它

您将能够缓存图像，下次需要相同的图像时，您可以从缓存中获取图像，而不是通过再次调用API浪费配额和时间

一些观察结果：

ng repeat

应该是

ng repeat=“photo in places[0]。photos”

而不是

ng repeat=“photo in place.photos”

作为

$scope.places

等于

response.data.results

在模块中作为依赖项注入，并在视图中使用

ng bind html

以

链接的形式显示photo.html\u属性[0]


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

照片参考
maxwidth-int值从1到1600
密钥-您的API密钥
然后，完整的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'，函数（$scope）{
$scope.places=[
{
“几何学”：{
“地点”：{
“lat”：-33.8675570000001，
“液化天然气”：151.201527
},
“视口”：{
“东北”：{
“lat”：-33.86752310000001，
“液化天然气”：151.2020721
},
“西南”：{
“lat”：-33.8675683，
“液化天然气”：151.2013453
}
}
},
“图标”：”https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
“id”：“ce4ffe228ab7ad49bb050defe68b3d28cc879c4a”，
“名称”：“悉尼展示船”，
“开放时间”：{
“立即开放”：没错，
“工作日文本”：[]
},
“照片”：[
{
“高度”：750，
“html_属性”：[
“\u003ca href=\”https://maps.google.com/maps/contrib/107415973755376511005/photos\“\u003eSydney展示船\u003c/a\u003e”
],
“照片参考资料”：“COQBCWAAALJU5RTXZHQOMMD7ZC7PBDMVU2B9CNM——JW4JHMYSFUAL8N9BKTJ-S6JNX34VK4MITCQMAMGTXQTXMHXPZ-PHWsLhKMbueA-1-JVZCUR8XZC4WINHSETWPGQ0Z1E7SNR8FKJIDBM2X8TCVDDREZ1KF4UYXXIUQ9ZWWTWWTWKKHKHKHZUFRL1733SOJJHKHKKKKHKKKKKKKKKKKKKKKKKKKKKKKH8MJJJJJJJJJJJJJJJJJ，
“宽度”：1181
}
],
“地点id”：“Chijjruitiuemsrchynrwisok”，
“评级”：4.3，
“参考文件”：“CNRKAAAQH-eVS3qC5X1iGf5VLdWVPrh4B8NsOaH-H3HED3DZKTHZZZ9AN9MYCUNN29-RZGVRGFES0\u IWNODSLGUQW8UJ6MS8BWR2O5PAQ55MNRO5Z7AIR7FIC2JZZT716NX\u m4UJJJ3UJJJJYNUIQ2J7VKGPEQ8GVE5ROU4TOUAHAI404DC\u B079CR5NY”，
“范围”：“谷歌”，
“类型”：[
“旅行社”，
“餐厅”，
“食物”，
“兴趣点”，
“设立”
],
“附近地区”：“悉尼莱姆街国王街码头5号”
}
];
});

{{photo.photo_reference}
您是否用自己的API密钥替换API密钥部分？由于链接对我有效，当使用我的API_密钥时，不要将API密钥放在客户端！
<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>