如何获取酒店名称与酒店图片从谷歌地图附近的地方API？

Question

我已经阅读了附近地方搜索API的所有文档，并尝试了以下方法：

$: 

var amsterdam=newgoogle.maps.LatLng（，）；函数initialize（）{var mapProp={center:amsterdam，zoom:17，scrollwheel:false，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>

在这个例子中，我找到了酒店名称，但没有找到酒店图像。我得到一个对象作为酒店图像。请给我一些解决方案，我可以如何从谷歌地图酒店图像。

Answer 1

从PlacePhoto的文档中

google.maps.places.PlacePhoto对象规范

表示一个位置的照片元素。

方法

getUrl（选项：照片选项）

返回值：字符串

返回与指定选项对应的图像URL。必须包含至少指定了maxWidth或maxHeight之一的PhotoOptions对象。

属性

高度|类型：数字|照片的高度（像素）。

html|u attributes | Type:Array |要为此照片显示的属性文本。

宽度|类型：数字|照片的宽度（像素）。

要获取该位置照片的URL，请使用所需的PhotoOptions参数调用objects.getUrl方法。

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

概念小提琴的证明

代码片段：

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>