显示来自Google API Place Photo响应的图像 [英] Show image from Google API Place Photo response
问题描述
我正在使用Meteor.js.我需要Google Place的地方照片.我在这里使用Javascript.所以这就是我所做的.
I am working with Meteor.js. I need place photos of google place. I am working with Javascript here. So here is what I've done.
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对象:
I successfully got place_id from Place Details API call. With place_id I can then again successfully call the Place Photos API. I think all goes well here. In response I should get the photo and this is my responded JSON object:
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 他们说您得到照片作为回报.所以一切都很好,但是我不知道如何在没有网址的情况下在我的网站上显示这张照片.请提供一些有用的信息.
In the documentation here: https://developers.google.com/places/web-service/photos they say you get a photo in return. So everything is fine, but I don't know how to display this photo on my website according there is no url. Please provide some usefull info.
谢谢:)
推荐答案
我确实错过了 Sorin Lascu 所评论的功能.如果有人在Meteor.js中这样做,我将提供一个完整而简单的答案.我创建了一个输入字段,该字段具有Google Maps API自动完成功能,并立即在地图上显示该地点.您还将获得显示在照片和其他详细信息上所需的所有必要数据.
I did miss that function of what Sorin Lascu has commented. If someone is doing that in Meteor.js I will provide a complete and easy answer. I created an input field which has Google Maps API autocomplete, and shows the place on a map instantly. You also get all the necessary data you need to show to photos and other details.
我将此软件包 jeremy:geocomplete 添加到了我的项目中.
I added this package jeremy:geocomplete to my project.
我用HTML创建了这样的地图:
I created a map in HTML like this:
<div class="col s12 m10 l10 push-m1 push-l1" id="google_mapPlace">
{{> googleMap name="mapPlace" options=mapOptions}}
</div>
我在HTML中添加了一个输入字段
I added an input field in HTML
<input value="" type="text" class="findPlace">
然后在我的js文件中,我使用自动运行功能更新功能.
Then in my js file I update my function with autorun.
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}));
});
});
});
});
这篇关于显示来自Google API Place Photo响应的图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!