Nodejs）如何使用 Google Place Photo API 獲取圖像？

Question

我正在嘗試使用Google Place Photos API來檢索我設法動態獲取照片參考的圖像，但我不確定如何使用此 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 索引。 文檔表明它最多可以返回十張圖像。

如果該地點有相關的照片內容，則對這些請求的響應將包含一個 photos[] 字段。

所以像

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

或第一個 URL 返回的任何地方。