如何从谷歌地方 api 获取图像？答案

【问题标题】：How to get an image from google places api?如何从谷歌地方 api 获取图像？
【发布时间】：2020-12-28 20:24:10
【问题描述】：

我目前一直在尝试从 Google Places API 获取图片，文档中声明要获取您拥有的图片https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=[imagereference]&key=[yourkey]

然后，这会将您重定向到包含实际图像的 URL。当我试图获取 base 64 图像版本以便可以在我的 react 应用程序中使用时，如何使用 axios 或 fetch 执行此过程？

【问题讨论】：

标签： reactjs google-maps axios xmlhttprequest base64

【解决方案1】：

如果您想在客户端应用程序中显示 Places API 照片，您需要使用 Google Maps JavaScript Places Library 的 Places Photos。

下面的代码 sn-p 显示了我如何从 getDetails 结果中获取照片 URL 并将其放入我的状态变量中的示例：

       const request = {
              placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
              fields: [
                "name",
                "formatted_address",
                "place_id",
                "geometry",
                "photos"
              ]
            };

            const service = new google.maps.places.PlacesService(map);
            service.getDetails(request, (place, status) => {
              if (
                status === google.maps.places.PlacesServiceStatus.OK &&
                place &&
                place.geometry &&
                place.geometry.location
              ) {
                const marker = new google.maps.Marker({
                  map,
                  position: place.geometry.location
                });
              }
              this.setState({
                photos: place.photos[0].getUrl(),
                name: place.formatted_address
              });
            });

这是sample code，要查看这项工作，请将Map.js 内脚本中的YOUR_API_KEY 替换为您的API 密钥。

【讨论】：