Nodejs）如何使用Google Place Photo API获取图像？

Question

我正在尝试使用 google place plote photos photos photo 我设法动态地获得了照片参考，但是我不确定如何使用此API检索图像。

async function getImageOfPlace(place){
try{
  const response = await fetch('https://maps.googleapis.com/maps/api/place/photo? 
   maxwidth=400&photo_reference='+place+'&key='+apiKey);
   //const json = await response.json();
   console.log(response);
 }catch(e){
   console.log(e);
}
}

上面的代码显示了这样的响应：

Response {
 [Symbol(realm)]: null,
 [Symbol(state)]: {
   aborted: false,
   rangeRequested: false,
   timingAllowPassed: true,
   requestIncludesCredentials: false,
   type: 'default',
   status: 200,
   timingInfo: {
     startTime: 2738.1868999004364,
     redirectStartTime: 2738.1868999004364,
     redirectEndTime: 2909.6113998889923,
     postRedirectStartTime: 2909.6113998889923,
     finalServiceWorkerStartTime: 0,
     finalNetworkResponseStartTime: 0,
     finalNetworkRequestStartTime: 0,
     endTime: 0,
     encodedBodySize: 1125,
     decodedBodySize: 773,
     finalConnectionTimingInfo: null
   },
   cacheState: '',
   statusText: 'OK',
   headersList: HeadersList {
     [Symbol(headers map)]: [Map],
     [Symbol(headers map sorted)]: null
   },
   urlList: [ [URL], [URL] ],
   body: { stream: undefined }
 },
 [Symbol(headers)]: HeadersList {
   [Symbol(headers map)]: Map(16) {
     'access-control-expose-headers' => 'Content-Length',
     'content-disposition' => 'inline;filename="2019-12-07.jpg"',
     'vary' => 'Origin',
     'access-control-allow-origin' => '*',
     'timing-allow-origin' => '*',
     'x-content-type-options' => 'nosniff',
     'server' => 'fife',
     'content-length' => '13767',
     'x-xss-protection' => '0',
     'date' => 'Wed, 06 Jul 2022 16:49:15 GMT',
     'expires' => 'Thu, 07 Jul 2022 16:49:15 GMT',
     'cache-control' => 'public, max-age=86400, no-transform',
     'etag' => '"v2041"',
     'content-type' => 'image/jpeg',
     'age' => '428',
     'alt-svc' => 'h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"'
   },
   [Symbol(headers map sorted)]: null
 }
}

如何获得响应图像的图像或URL？

有人告诉我可以直接打电话，将API URL放入Image SRC中，

<img src='https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photo_reference='+image+'&key='+apiKey'/>

但我认为我不能这样做，因为将Apikey存储在客户端，据我所知，这是非常危险的

任何如何检索图像的好主意使用此API？

Answer 1

您可能必须使用[]操作员从响应中获取图像URL的正确索引。 docs 表明它可以返回最多10张图像。

如果该地方具有相关的摄影内容，对这些请求的响应将包含照片[]字段。

因此，类似

return response[1]['urlList'][0]

或第一个URL返回的地方。