首页 文章

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

提问于
浏览 次
0

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

$:

var amsterdam = new google.maps.LatLng（，）; function 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>

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

javascript google-maps

1 回答

  • 0

    来自documentation of PlacePhoto

    google.maps.places.PlacePhoto对象规范表示Place的照片元素 . 方法getUrl（opts：PhotoOptions）返回值：string返回与指定选项对应的图像URL . 您必须包含一个PhotoOptions对象，其中至少指定了maxWidth或maxHeight之一 . 属性高度|类型：数字|照片的高度（以像素为单位） . html_attributions |类型：数组|要为此照片显示的归因文字 . 宽度|类型：数字|照片的宽度（以像素为单位） .

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

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

    proof of concept fiddle

    code snippet:

    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>
    回复于

相关问题