2016-09-01 29 views
0

私はMeteor.jsと一緒に作業しています。私はGoogleの場所の場所の写真が必要です。私はここでJavascriptで作業しています。だからここに私がしたことがあります。Google API Placeの画像を表示写真の返信

  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); 
         } 
        }); 

       } 
      }); 

プレイス詳細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彼らはあなたが見返りに写真を入手言います。だからうまくいっていますが、URLがないので私のウェブサイトにこの写真を表示する方法はわかりません。いくつかの有用な情報を提供してください。

感謝:)

+1

javascriptページを参考にしてみましたか?そこにはhttps://developers.google.com/maps/documentation/javascript/places#places_photosの説明があります –

答えて

0

私はソリン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> 

私はその後、私のjsファイルで、私はオートランで私の機能を更新するHTML

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

に入力フィールドを追加しました。

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})); 
      }); 
     }); 
    }); 
}); 
関連する問題