Блог

Я пытаюсь перечислить все результаты поиска Google поблизости, используя angularjs, но я не могу использовать функцию Google place getURL(), которая вернет URL-адрес фотографий места

вот мой код

Функция в контроллере angular

  $scope.bars = [];
 $scope.hospitals = [];
 $scope.PlaceSearch = function (type){      
        //ClearAllMarkers();
        if(map.getZoom() > 17 ){ map.setZoom(17)}

    var bounds = map.getBounds();
    var service = new google.maps.places.PlacesService(map);
        service.nearbySearch({          
          bounds:bounds,
          type: type,
          rankBy:google.maps.places.RankBy.PROMINENCE,
          //minPriceLevel:2,
        }, function(results, status, pagination){
            if(status == 'ZERO_RESULTS') return FlashMessage('Zero Results for selected place','alert-info');

            if (status !== google.maps.places.PlacesServiceStatus.OK) {
                console.log(' false in processResults' );
                return;
            }else{

            }

            switch(type){                               
                case 'bar':
                    angular.merge($scope.bars, results);
                    console.log($scope.bars);
                    if(pagination.hasNextPage) pagination.nextPage();
                break;

                case 'Hospitals':
                    angular.merge($scope.hospitals, results);
                    if(pagination.hasNextPage) pagination.nextPage();
                break;
            }
        }); 
}
  

в этой функции Google возвращает массив списка объектов, который имеет свойство photos. Фотографии — это массив со списком фотографий места, каждый объект фотографий содержит getUrl() функцию, которая возвращает URL-адрес фотографии места. В моем файле view я использую этот подход.

 <div class="sr-row clearfix" ng-repeat="bar in bars">
<div class="sr-thumb" ng-if="bar.hasOwnProperty('photos')">
    <img src="@{{ bar.photos[0].getUrl() }}" />
</div>
<div class="sr-thumb" ng-if="!bar.hasOwnProperty('photos')">
    <img src="bar.icon" alt="palceholderImgae" />
</div>
<div class="sr-detail">
    <div class="sr-title">
        <h3>@{{ bar.name | limitTo:30 }}</h3>
    </div>
    <div class="sr-middle">
        <p>@{{ bar.vicinity | limitTo:40 }}</p>
    </div>
    <div class="sr-bottom">                                                         
        @{{ bar.rating }}
    </div>
</div>
  

и это выдает ошибку
Ошибка: $interpolate: ошибка интерполяции interr

 Can't interpolate: {{ bar.photos[0].getUrl() }}
TypeError: b is undefined


Error: [$interpolate:interr] http://errors.angularjs.org/1.5.7/$interpolate/interr?p0={{ bar.photos[0].getUrl() }}amp;p1=TypeError: b is undefined
  

Я думаю, что проблема в том, что «ng-if» в любом случае пытается скомпилировать и интерполировать свой поддом (а затем удаляет его из DOM, если значение равно «false»). Поэтому, поскольку bar.photos может не существовать, это может вызвать проблемы.

Может быть, попробуйте использовать «ng-src» в вашем элементе img и позволить ему интерполировать выражение?

Эта ошибка, вероятно, связана с вызовом функции для несуществующего объекта. Вы можете попробовать это (см. Пример):https://plnkr.co/edit/z8mappFjJrGwAtvmSB6C?p=preview

 <img ng-src="@{{ (bar amp;amp; bar.photos) ? bar.photos[0].getUrl() : '' }}" />
  

Также убедитесь, что ваш параметр photos имеет метод getURL, потому что в этом коде

 case 'bar':
    angular.merge($scope.bars, results);
    console.log($scope.bars);
    if (pagination.hasNextPage) pagination.nextPage();
    break;
  

по умолчанию вы получаете только массив объектов json с такими элементами:

 "photos": [{
    "height": 270,
    "html_attributions": [],
    "photo_reference": "CnRnAAAAF-LjFR1ZV93eawe1cU_3QNMCNmaGkowY7CnOf-kcNmPhNnPEG9W979jOuJJ1sGr75rhD5hqKzjD8vbMbSsRnq_Ni3ZIGfY6hKWmsOf3qHKJInkm4h55lzvLAXJVc-Rr4kI9O1tmIblblUpg2oqoq8RIQRMQJhFsTr5s9haxQ07EQHxoUO0ICubVFGYfJiMUPor1GnIWb5i8",
    "width": 519
}]
  

Таким образом, у bar в bars не будет такого метода, как getURL(). Если вы используете пользовательскую оболочку для photo_reference для изменения ответа, пожалуйста, предоставьте ее, чтобы увидеть полное изображение.

В массиве фотографий есть объект PlacePhoto, когда я проверил объект PlacePhoto из ответа, я не нашел функцию getURL. Я видел, что объект raw_reference имеет свойство fife_url

итак, я изменил интерполяцию src изображения следующим образом {{bar.photos[0].raw_reference.fife_url}}

Я надеюсь, что это решит вашу проблему

Попробуйте этот код

 <div class="sr-row clearfix" ng-repeat="bar in bars">
<div class="sr-thumb" ng-if="bar.hasOwnProperty('photos')">
    <img ng-if="bar.photos" src="{{bar.photos[0].raw_reference.fife_url}}" />
</div>
<div class="sr-thumb" ng-if="!bar.hasOwnProperty('photos')">
    <img src="bar.icon" alt="palceholderImgae" />
</div>
<div class="sr-detail">
    <div class="sr-title">
        <h3>@{{ bar.name | limitTo:30 }}</h3>
    </div>
    <div class="sr-middle">
        <p>@{{ bar.vicinity | limitTo:40 }}</p>
    </div>
    <div class="sr-bottom">                                                         
        @{{ bar.rating }}
    </div>
</div>