Question

我正在尝试使用angularjs列出所有谷歌附近的搜索结果，但我不能使用谷歌地方函数getUrl（），它将返回地方照片的网址

这是我的代码

角度控制器中的功能

 $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返回一个具有照片属性的地方列表数组。照片是带有地点照片列表的数组，每个照片对象都包含getUrl()功能，返回地点照片网址。在我的视图文件中，我正在使用这种方法。

<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=%7B%7B%20bar.photos%5B0%5D.getUrl()%20%7D%7D&p1=TypeError%3A%20b%20is%20undefined

Answer 1

我认为问题在于＆＃34; ng-if＆＃34;尝试编译并插入其子DOM（如果值为＆＃34; false＆＃34;则将其从DOM中删除）。因为bar.photos可能不存在，可能会导致问题。

也许尝试使用＆＃34; ng-src＆＃34;在你的img元素上，让它插入表达式？

Answer 2

此错误可能与对未存在对象的函数调用有关。你可以尝试这个（参见一个例子）： https://plnkr.co/edit/z8mappFjJrGwAtvmSB6C?p=preview

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

另外请确保您的照片参数有 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
}]

所以酒吧里的酒吧没有像getUrl（）这样的方法。您是否正在使用自定义包装器进行photo_reference更改响应，请提供它以查看完整图片。

Answer 3

照片数组有 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>

无法在角度视图中调用Google地方对象功能

3 个答案: