如何通过附近的地方 API 从谷歌地图中获取带有酒店图片的酒店名称？

Question

我已阅读附近地点搜索 API 的所有文档并尝试过：

$: 

var amsterdam = new 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>

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

Answer 1

来自documentation of PlacePhoto

google.maps.places.PlacePhoto 对象规范

表示地点的照片元素。

方法

getUrl(opts:PhotoOptions)

返回值：字符串

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

属性

身高 |类型：数字 |照片的高度（以像素为单位）。

html_attributions |类型：数组 |要为这张照片显示的署名文字。

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

要获取该地点照片的 URL，请使用所需的 PhotoOptions 参数调用对象 .getUrl 方法。

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

proof of concept fiddle

代码 sn-p：

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>