如何使用 angular 应用从 google api 的附近搜索中获取某个地点的图片？

Question

我正在使用 google 个地点 api，我正在尝试获取附近搜索地点的图像。我尝试了几种变体，文档似乎不正确，或者我正在做的事情并没有明显错误。

这个我试过了。

 let request2 = {
      key: this.apiKey.getStandardGoogleKey(),
      placeId:"place_id_to_be_used"
    };

    service.getDetails(request2, (results, status )=> this.callback2(results, status));
  }

  callback2(results, status){
    console.log(results);
  }

我得到这个结果

根据文档，照片数组应包含 photo_reference 以便我可以访问图像，但它没有。

我也尝试过使用来自 angular 的 http 请求直接访问 api 使用这个

https://maps.googleapis.com/maps/api/place/nearbysearch/output?parameters

当我从邮递员那里执行此操作时，我得到 photo_reference。但是当我从我的 angular 应用程序执行此操作时，我收到一个 CORS 错误，如下所示。

我可以通过向 chrome 添加一个插件来在本地解决这个问题，但是在生产服务器上返回错误。

我的问题是。如何从 google 个地方 api 或另一个 google api 获取一个 photo_refence 的 placeid 或从 nearbySearch 检索到的另一个值？

Answer 1

photo_reference 属性出现在导致 CORS 错误的网络浏览器的 Places API web service. As you mentioned, the web service cannot be called directly from the client side JavaScript code due to same-origin policy 的响应中。

看你的屏幕截图，我会说你在代码中使用的库使用了地图 JavaScript API 的地点服务。所以你调用 PlacesService 的 getDetails() 方法：

https://developers.google.com/maps/documentation/javascript/reference#PlacesService

回调函数接收PlaceResult对象：

https://developers.google.com/maps/documentation/javascript/reference#PlaceResult

地点结果包含一个 PlacePhoto 对象数组：

https://developers.google.com/maps/documentation/javascript/reference#PlacePhoto

如您所见，PlacePhoto 对象有一个 getUrl(opts:PhotoOptions) 方法：

Returns the image URL corresponding to the specified options. You must include a PhotoOptions object with at least one of maxWidth or maxHeight specified.

使用此方法，您将获得一张 URL 的地点照片。

希望对您有所帮助！

如何使用 angular 应用从 google api 的附近搜索中获取某个地点的图片？

How to get a an image of a place from a nearby search from google api with an angular app?

angular

google-maps

google-places-api