如何使用Angular中的Google Places API获取照片的照片参照

Question

我正试图通过Angular中的Google自动填充来获取地点详情。

我的代码是：

var input = document.getElementById('searchBar');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();
});

当我使用place打印console.log()时，我在photo_reference数组中未获得photos字段here

我只在photos数组

中获得以下内容

"photos": [{
     "height": 1198,
     "html_attributions": [
                ... something ...
            ],
     "width": 1600
 },...]

然而，如果我使用CURL或POSTMAN调用相同的API，我会得到photo_reference字段。

"photos": [{
      "height": 364,
      "html_attributions": [
                   ... something ...
      ],
       "photo_reference": "CmRaAAAAZbczldylJ55Yk8EsT6SgRMstEc2-aZIBJreHNmjKQh_2HU5rAWE3y1FKD3gyr5bUo9lx-UD-jz-CseqRv1l88lQhjZdFXTBOWyKegbb_xX9VnWSRs6Dlkp0CpngP1gtzEhDRByCLpQYQFrmmN-l6gmCvGhR0-JtgWPXvhv_yumVbJiGqfP-ArQ",
      "width": 550
 },....]

如何获得photo_reference？我做错了什么？

Answer 1

不确定您是否已找到解决方案。但我找到了获取照片网址的方法。

然后，您可以致电：

place.photos[0].getUrl({'maxWidth': 500, 'maxHeight': 500})

最后，我们可以将网址设为：“https://lh3.googleusercontent.com/p/AF1QipMghp6IzB9xG019r-1mo8wgBmuKa3_oVadVEu7S=w500-h500-k”

Answer 2

Google自动完成功能不提供photo_reference属性。

但是正如咸蛋所述，您可以致电：

place.photos[0].getUrl({'maxWidth': 500, 'maxHeight': 500})

wich将返回照片网址，例如：

https://maps.googleapis.com/maps/api/place/js/PhotoService.GetPhoto?1sCmRaAAAAaMqJfssQ7GtvlNWHquUob3f4f_w7d3SlDT0u84-m4ZmBW1rK5iu8XrvK1Thz6plwOsaq9yt-p9gAPfHBDDf6xuIU71WJTZ8BdyWxJIOsj836Rfk1bghIcgAi_L-ffoBzEhDXy7_TigSRZnkP7a6laSvnGhTLzJ34PDMlvi4nuTAZVsQO9iqcXw&3u1000&4u667&5m1&2e1&callback=none&key=YOUR_API_KEY&token=SOME_TOKEN

其中

CmRaAAAAaMqJfssQ7GtvlNWHquUob3f4f_w7d3SlDT0u84-m4ZmBW1rK5iu8XrvK1Thz6plwOsaq9yt-p9gAPfHBDDf6xuIU71WJTZ8BdyWxJIOsj836Rfk1bghIcgAi_L-ffoBzEhDXy7_TigSRZnkP7a6laSvnGhTLzJ34PDMlvi4nuTAZVsQO9iqcXw＆3u1000＆4u667＆5M1及2E1

是photo_reference。