了解 Google 地方照片 API 的响应

Question

我正在使用 jquery ajax 调用 Google Place Photos API，并根据之前检索到的照片参考检索响应。请求似乎正在通过，但我不明白 response/how 我可以将其转换为图像的格式。

$.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.&XYZ (W.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.，所有权利 reserved.descCamera RGB ProfileCamera RGB Profile��

...等了好久

Answer 1

如果您在客户端 JavaScript 中编码，您应该使用 JavaScript API 的位置库中的 Place Photos client-side service，以避免相同的 CORS 错误-来源政策。

否则，您从 Places Photos web service 获得的图像可以直接添加到 <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>

另见这些相关问题：

希望对您有所帮助！

Answer 2

我已经研究这个问题两天了，寻找使用cors正确获取Google地方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}

在img的src属性里面变成这样https://lh3.googleusercontent.com/p/AF1QipMbYnOpzH_paZWB2UNUob07yY18tjLTtkzHTSMR=s1600-w400?

了解 Google 地方照片 API 的响应

Understanding the response from the Google Places Photos API

javascript

google-maps

google-places-api