javascript - 如何在 Angular 中使用 Google Places API 获取照片的 photo_reference

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();
});

当我使用 console.log() 打印 place 时，我没有在 photos 中获取 photo_reference 字段建议的数组 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

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

但正如咸蛋提到的，你可以调用:

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

它将返回一个照片 URL，例如:

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-ffoBzEh DXy7_TigSRZnkP7a6laSvnGhTLzJ34PDMlvi4nuTAZVsQO9iqcXw&3u1000&4u667&5m1&2e1

是photo_reference。