显示来自 Google API Place Photo 响应的图像答案

【问题标题】：Show image from Google API Place Photo response显示来自 Google API Place Photo 响应的图像
【发布时间】：2016-09-01 12:36:19
【问题描述】：

我正在使用 Meteor.js。我需要谷歌地方的地方照片。我在这里使用 Javascript。所以这就是我所做的。

            Meteor.call('getPlaceDetails', result.place_id, function (error, placeDetailsResult) {
                if (error) {
                    console.log(error);
                } else {
                    console.log(placeDetailsResult.data.result.photos[0].photo_reference);

                    Meteor.call('getPlacePhotos', placeDetailsResult.data.result.photos[0].photo_reference, function (error, photoresult) {
                        if (error) {
                            console.log(error);
                        } else {
                            console.log(photoresult);
                        }
                    });

                }
            });

我从 Place Details API 调用中成功获取了 place_id。使用 place_id 我可以再次成功调用 Place Photos API。我认为这里一切顺利。作为回应，我应该得到照片，这是我响应的 JSON 对象：

 Object {statusCode: 200, content: "����JFIF��*ExifII*1…!�o~Ç����`��&]<sP�\U��TV-���@#�{��8�#7��*�"���", headers: Object, data: null}
content
:
"����JFIF��*ExifII*1Google���↵  ↵↵↵↵↵
data
:
null
headers
:
Object
access-control-allow-origin
:
"*"
access-control-expose-headers
:
"Content-Length"
alt-svc
:
"quic=":443"; ma=2592000; v="36,35,34,33,32,31,30""
alternate-protocol
:
"443:quic"
cache-control
:
"public, max-age=86400, no-transform"
connection
:
"close"
content-disposition
:
"inline;filename="2015-11-13.jpg""
content-length
:
"38587"
content-type
:
"image/jpeg"
date
:
"Thu, 01 Sep 2016 12:12:47 GMT"
etag
:
""v21fad""
expires
:
"Fri, 02 Sep 2016 12:12:47 GMT"
server
:
"fife"
vary
:
"Origin"
x-content-type-options
:
"nosniff"
x-xss-protection
:
"1; mode=block"
__proto__
:
Object
statusCode
:
200
__proto__
:
Object

在此处的文档中：https://developers.google.com/places/web-service/photos 他们说您会得到一张照片作为回报。所以一切都很好，但我不知道如何在我的网站上显示这张照片，因为没有网址。请提供一些有用的信息。

谢谢:)

【问题讨论】：

您是否尝试过查看 javascript 页面？它在那里解释：developers.google.com/maps/documentation/javascript/…

标签： javascript meteor google-places-api

【解决方案1】：

我确实错过了 Sorin Lascu 所评论的功能。如果有人在 Meteor.js 中这样做，我将提供一个完整而简单的答案。我创建了一个具有 Google Maps API 自动完成功能的输入字段，并立即在地图上显示该地点。您还可以获得所有需要显示到照片和其他详细信息的必要数据。

我将这个包 jeremy:geocomplete 添加到我的项目中。

我在 HTML 中创建了一个这样的地图：

<div class="col s12 m10 l10 push-m1 push-l1" id="google_mapPlace">
    {{> googleMap name="mapPlace" options=mapOptions}}
</div>

我在 HTML 中添加了一个输入字段

<input value="" type="text" class="findPlace">

然后在我的 js 文件中，我使用自动运行更新我的函数。

Template.adminCollections.onRendered(function() {
    this.autorun(function () {
        if (GoogleMaps.loaded()) {
            $(".findPlace").geocomplete({
                map: "#google_mapPlace",
                nearbySearchKeys: ['photos', 'place_id', 'name', 'geometry']
            }).bind("geocode:result", function(event, result){
                $('.myimg').attr('src', result.photos[0].getUrl({'maxWidth': 500, 'maxHeight': 500}));
            });
        });
    });
});

【讨论】：