Question

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

$:

var amsterdam = new google.maps.LatLng（，）; function initialize（）{ var mapProp = { 中心：阿姆斯特丹， 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

来自documentation of PlacePhoto

google.maps.places.PlacePhoto对象规范

代表地方的照片元素。

<强>方法

<强>使用getURL（OPTS：PhotoOptions）

返回值：字符串

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

<强>属性

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

html_attributions |类型：数组|要为此照片显示的归因文字。

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

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

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>

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

1 个答案: