如何使用google places api来显示场地的照片,

时间:2018-05-03 12:53:19

标签: javascript google-places-api google-street-view

var str = "";

$.ajax({
  dataType: 'json',
  type: 'GET',
  url: 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=40.720032,-73.988354&radius=10000&type=bars&keyword=bar&key=KEY-HERE,
  success: function(data){

for(var dt in data.results){
  $('ul').append('<li>'+data.results[dt].name+'</li>');

  $.ajax({
    dataType: 'json',
    type: 'GET',
    url: 'https://maps.googleapis.com/maps/api/place/details/json?placeid='+data.results[dt].place_id+'&key=KEY-HERE',
    success: function(data1){
      for(var i = 0; i < data1.result.reviews.length; i++){
        if(data1.result.reviews){
          str = data1.result.reviews[i].rating;

          $('ul').append('<span>'+str+'</span><li>'+data1.result.reviews[i].author_name+'</li>');
          }
        }

  $.ajax({
    dataType: 'json',
    type: 'GET',
    url: 'https://maps.googleapis.com/maps/api/streetview?size=600x300&location=40.7484,-73.9857&heading=151.78&pitch=-0.76&key=KEY-HERE',
    success: function(data2){
      var attributions = $("#attributions");
      var service = new google.maps.places.PlacesService(attributions);
      service.getDetails(data1.results[0].place_id, function(place, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {

            var src = 'https://maps.googleapis.com/maps/api/streetview?size=600x300&location=40.7484,-73.9857&heading=151.78&pitch=-0.76&key=KEY-HERE';
             return $("#image").attr('src', sr);
    }
  })
}

})

它在我的控制台中以200状态代码回复,但没有在我的浏览器中显示图像,它还给了我一张该位置的照片,但它应该用场地的不同照片作出回应

1 个答案:

答案 0 :(得分:0)

我目前没有网站的工作版本,所以我无法确认。我使用过其他谷歌图片API,例如:<img src="https://maps.googleapis.com/maps/api/streetview?size=600x300&location=40.7484,-73.9857&heading=151.78&pitch=-0.76&key=KEY-HERE"/>

更新:确认以上适用于

<img src="https://maps.googleapis.com/maps/api/place/photo?photoreference=CmRaAAAATj4PARx8gR50LV2CRGDu5KfKG-MYFcB83wIMLQhnF0B8RyV4tL7uYmfWt3ftSYI5o195Ype4lwpDw3_TS3w5rWihd6qyvOyllc5yyrOUdUVY3jyeEeByQFihmz_kTZ9nEhAOO-m_2By6qwxFK124QJleGhQUjcmjs_8HOQ2RNV5GysJ-Ulg_5Q&key=_____MY_KEY____&maxheight=1000&maxwidth=600" </img>