了解來自 Google Places Photos API 的響應

Question

我正在使用 jquery ajax 調用Google Place Photos API ，並根據之前檢索到的照片參考檢索響應。 該請求似乎正在通過，但我不明白響應的格式/如何將其轉換為圖像。

$.ajax({
        url: 'https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&key=myKey',
        method: 'GET'
    })
    .then(function(imageResponse) {
        console.log("Image response", imageResponse);
    })

輸出格式如下...

JFIF *ExifII*1Google XICC_PROFILEHappl scnrRGB XYZ acspAPPLappl -appl rXYZgXYZbXYZ0wtptDchadX,rTRC gTRC bTRC desc ncprt Adscm XYZ tK> XYZ Zs 3XYZ R sf32B & lcurv3mlucenUS$ esES,LdaDK4 deDE, fiFI( frFU< itIT,rnlNL$noNO xptBR(JsvSE* jaJPkoKR2zhTW2zhCN Kameran RGB-profiiliRGB-profil f r Kamera0 0 0 RGB 0 0 0 0 0 0 exOMv j_ RGB r_icϏ Perfil RGB para C maraRGB-kameraprofilRGB-Profil f r Kamerasv g: RGB cϏ e N RGB-beskrivelse til KameraRGB-profiel Camera t T | RGB \\ |Perfil RGB de C meraProfilo RGB FotocameraCamera RGB ProfileProfil RVB de l appareil-phototextCopyright 2003 Apple Computer Inc., all rights reserved.descCamera RGB ProfileCamera RGB Profile

……等了好一陣子。

Answer 1

如果您在客戶端 JavaScript 中編碼，您應該使用來自 JavaScript API 的地方庫的地方照片客戶端服務，以避免來自同源策略的 CORS 錯誤。

否則，您從Places Photos Web 服務獲取的圖像可以直接添加到<img>源，如下所示：

<img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRvAAAAwMpdHeWlXl-lH0vp7lez4znKPIWSWvgvZFISdKx45AwJVP1Qp37YOrH7sqHMJ8C-vBDC546decipPHchJhHZL94RcTUfPa1jWzo-rSHaTlbNtjh-N68RkcToUCuY9v2HNpo5mziqkir37WU8FJEqVBIQ4k938TI3e7bf8xq-uwDZcxoUbO_ZJzPxremiQurAYzCTwRhE_V0&key=YOUR_API_KEY"></img>

另請參閱以下相關問題：
我在哪里檢索 photo_reference 值以發出 Google 地方信息照片請求？
如何使用 angular 應用程序從 google api 的附近搜索中獲取某個地點的圖像？

希望這可以幫助！

Answer 2

我一直在挖掘這個問題兩天，尋找使用 cors 正確獲取 Google Places Api（照片） https://developers.google.com/places/web-service/photos 的方法

我幾乎不知道，該死的，所有這些都是完全錯誤的方法。 根本不需要提取！

 ... let checkedPhoto = spot.photos[0].photo_reference; checkedPhoto = `https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=${checkedPhoto}&key=${apiKey}`; ...

它仍然是黑魔法，因為不清楚像這樣的字符串如何： https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=${checkedPhoto}&key=${apiKey} : https://maps.googleapis.com/maps/api/place/photo?maxwidth=300&photoreference=${checkedPhoto}&key=${apiKey}

在 img 的 src 屬性中變成了這樣的https://lh3.googleusercontent.com/p/AF1QipMbYnOpzH_paZWB2UNUob07yY18tjLTtkzHTSMR=s1600-w400 ？