如何从谷歌api的附近搜索中使用角度应用程序获取地点的图像? [英] How to get a an image of a place from a nearby search from google api with an angular app?

问题描述

我正在使用Google Places API，并且正在尝试获取附近搜索位置的图片.我尝试了几种变体，似乎文档不正确，或者我做的事情显然不是错误的.

I am using the google places api, and I am trying to get an image for a place of a nearby search. I have tried several variations, and it seems like the documentation is not right, or I am doing something that is not obviously wrong.

我已经尝试过了.

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

我得到这个结果

根据文档，photos数组应包含photo_reference，以便我可以访问图像，但不能.

According to the docs, a photos array should include a photo_reference so that I can access an image, but it does not.

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

I have also tried access the api directly with an http request from angular using this

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

当我从邮递员那里进行操作时，我得到了photo_reference.但是，当我从我的有角度的应用程序中执行此操作时，会收到一个CORS错误，看起来像这样.

When I do this from postman, I get the photo_reference. But when I do this from my angular app I get a CORS error which looks like this.

我可以通过在chrome中添加插件来在本地解决此问题，但错误会在生产服务器上返回.

I can get around this locally by adding a plugin to chrome, but the error returned on the production server.

我的问题是.我该如何从Google Places api或另一个google api中获取photo_refence，以获取从附近的搜索中检索到的Placeid或其他值?

My question is. How do I get a photo_refence from the google places api or another google api for a placeid or another value retrieved from a nearbySearch?

推荐答案

photo_reference属性出现在Places API的响应中同源政策会导致CORS错误的网络浏览器.

The photo_reference property appears in the response of 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 of web browsers that results in CORS error.

看您的屏幕快照，我想说您在代码中使用的库使用了Maps JavaScript API的places服务.因此，您调用PlacesService的getDetails()方法:

Looking at your screenshot, I would say that the library you used in your code uses a places service of Maps JavaScript API. So you call getDetails() method of PlacesService:

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

回调函数接收PlaceResult对象:

The callback function receives PlaceResult object:

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

放置结果包含一个PlacePhoto对象数组:

The place result contains an array of PlacePhoto objects:

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

您可以看到PlacePhoto对象具有getUrl(opts:PhotoOptions)方法:

As you can see the PlacePhoto object has a getUrl(opts:PhotoOptions) method:

返回与指定选项相对应的图像URL.您必须包含一个PhotoOptions对象，并至少指定maxWidth或maxHeight中的一个.

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.

Use this method and you will get a URL of place photo.

我希望这会有所帮助！

这篇关于如何从谷歌api的附近搜索中使用角度应用程序获取地点的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！