如何從附近的地方API的谷歌地圖酒店圖像獲取酒店名稱？

Question

我看了附近的地方搜索API的所有文件，並嘗試這樣的：

$: 

VAR阿姆斯特丹=新google.maps.LatLng（，）; 函數初始化（）{ VAR mapProp = { 中心：阿姆斯特丹， 變焦：17， 滾輪：假， 的mapTypeId：google.maps.MapTypeId.ROADMAP };

 var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

     var myCity = new google.maps.Circle({ 
      center: amsterdam, 
      radius: 150, 
      strokeColor: "#55A82C", 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: "#7cbd22", 
      fillOpacity: 0.4 
     }); 

     myCity.setMap(map); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

    var map1; 
    var infowindow; 
    var pyrmont = {lat: <?php echo $data['lat'] ?>, lng: <?php echo $data['lng'] ?>}; 
    function initMap() { 

     map1 = new google.maps.Map(document.getElementById('Map'), { 
      center: pyrmont, 
      zoom: 15 
     }); 
     var service = new google.maps.places.PlacesService(map1); 
     service.nearbySearch({ 
      location: pyrmont, 
      radius: 800, 
      type: ['lodging'], 
      "photos" : [ 
       { 
        "height" : 426, 
        "html_attributions" : [ 
         "\u003ca href=\"https://www.google.com/maps/views/profile/104066891898402903288\"\u003eRhythmboat Cruises\u003c/a\u003e" 
        ], 
        "photo_reference" : pyrmont, 
        "width" : 640 
       } 
      ] 
     }, callback); 
    } 

    function callback(results, status) { 
     if (status === google.maps.places.PlacesServiceStatus.OK) { 
      var hotelname = ''; 
      for (var i = 0; i < results.length; i++) { 
       var name = results[i]['name']; 
       var photo = results[i]['photos']['photo_reference']; 
       if(i<6) 
       { 
        hotelname += '<span class="">'+name+'</span>'; 
        hotelname += '<img src="'+photo+'"/>'; 
       } 
      } 
      $("#hotel").html(hotelname); 
     } 
    } 

    google.maps.event.addDomListener(window, 'load', initMap); 
</script> 

在這個例子中，我找到了酒店名稱，但沒有找到酒店的圖像。我得到了一個對象作爲酒店圖像。請給我一些解決方案，以瞭解如何從Google地圖獲取酒店圖片。

Answer 1

從documentation of PlacePhoto

google.maps.places.PlacePhoto對象規範

表示的地點的照片元件。

方法

的getURL（選：PhotoOptions）

返回值：字符串

返回對應於指定的選項圖像的URL。您必須包含一個至少指定了maxWidth或maxHeight之一的PhotoOptions對象。

屬性

高度 |類型：數字|以像素爲單位的照片高度。

html_attributions |類型：Array |要爲此照片顯示歸因文字。

寬度 |類型：數字|照片的寬度（以像素爲單位）。

要獲得照片的地方URL，調用對象方法.getUrl與所需PhotoOptions說法。

var photo = results[i]['photos'][0].getUrl({maxWidth: 100}); 

proof of concept fiddle

代碼片斷：

var map1; 
 
var infowindow; 
 
var pyrmont = { 
 
    lat: -33.867, 
 
    lng: 151.195 
 
}; 
 

 
function initMap() { 
 

 
    map1 = new google.maps.Map(document.getElementById('Map'), { 
 
    center: pyrmont, 
 
    zoom: 15 
 
    }); 
 

 
    var service = new google.maps.places.PlacesService(map1); 
 
    service.nearbySearch({ 
 
    location: pyrmont, 
 
    radius: 800, 
 
    type: ['lodging'] 
 
    }, callback); 
 
} 
 

 
function callback(results, status) { 
 
    if (status === google.maps.places.PlacesServiceStatus.OK) { 
 
    var hotelname = ''; 
 
    for (var i = 0; i < results.length; i++) { 
 
     // createMarker(results[i]); 
 
     var name = results[i]['name']; 
 
     var photo = null; 
 
     if (results[i].photos && (results[i].photos.length > 0)) { 
 
     var photo = results[i]['photos'][0].getUrl({ 
 
      maxWidth: 100 
 
     }); 
 
     } 
 
     if (i < 6) { 
 
     hotelname += '<img src="' + photo + '" />'; 
 
     hotelname += '<span class="">' + name + '</span><br>'; 
 
     } 
 
    } 
 
    $("#hotel").html(hotelname); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#Map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div id="hotel"></div> 
 
<div id="Map"></div>