Как получить фотографию в Google месте в angularjs, используя ссылку на фотографию

Ответ 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] как a link.

• Просто замените ниже параметры, чтобы отобразить ссылку на фотографию Google.

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

Ответ 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 на ВАШИМ КЛЮЧОМ API. Это должно храниться в секрете, чтобы вы не делали палочку в обращении с клиентом!

Что вам нужно сделать, так это на бэкэнде получить все изображения, вызвав URL-адреса, например https://maps.googleapis.com/maps/api/place/photo?photoreference=ENTER_PHOTO_REF_HERE&key=YOUR_API_KEY, сохранить их локально на сервере и в конце ссылки на локальные копии. Преимущества:

• Никто не узнает ваш ключ API и не сможет его использовать.
• Вы сможете кэшировать изображения, и в следующий раз понадобится одно и то же изображение - вы можете получить его из кеша и не использовать квоту и время, снова вызвав API.