javascript - 如何在Google Places API中使用附近的搜索来查找地点详细信息？

单击每个位置图标时，我无法显示位置详细信息。我阅读了文档，并认为自己编码正确。有人有什么建议吗？它也没有给我所有我应该得到的结果。当只有大约30家酒店时，它只会输出附近的1家酒店。谢谢。

  var map;
  var infowindow;
  function initMap() {
    var messiah = {lat: 40.158350, lng: -76.987454};
    map = new google.maps.Map(document.getElementById('map'), {
      center: messiah,
      zoom: 12
    });

    var marker = new google.maps.Marker({
        position: messiah,
        map: map,
        title: 'Messiah College'
    });

    var request = {
        location: messiah,
        radius: 10000,
        type: ['lodging']
    }
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
    service.getDetails(request, callback);
  }

  function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
        }
     }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
        map: map,
        icon: {
            url: 'http://maps.gstatic.com/mapfiles/circle.png',
            anchor: new google.maps.Point(10, 10),
            scaledSize: new google.maps.Size(10, 17)
        },
        position: place.geometry.location
  });


  var request = { reference: place.place_id };
  service.getDetails(request, function(details, status) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(details.name + "<br />" + details.                              formatted_address +"<br />" + details.website + "<br />" +                      details.rating + "<br />" + details.formatted_phone_number);
        infowindow.open(map, this);
  });
});

}

最佳答案

您犯了几点错误。

对于service.getDetails（）方法，您为引用属性传递了place_id，但正确的是place.reference，而不是place_id。
您不应该在for（）{...}中调用service.getDetails（），
因为getDetails方法可以异步工作。
这意味着您在短短的时间内拨打了许多电话。
（即，如果您获得10个结果，则您的代码将在一秒钟内调用getDetails（）方法。）
您的代码将被Google拒绝，因为在短时间内请求过多。

为了避免这种情况，应在单击标记后调用getDetails（）方法。

：

<!DocType html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      }
      #map {
      width: 100%;
      height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
    <script>
      var map;
      var infowindow;
      var service;

      function initMap() {
          var messiah = {
              lat: 40.158350,
              lng: -76.987454
          };
          map = new google.maps.Map(document.getElementById('map'), {
              center: messiah,
              zoom: 12
          });

          var marker = new google.maps.Marker({
              position: messiah,
              map: map,
              title: 'Messiah College'
          });

          var request = {
              location: messiah,
              radius: 10000,
              type: ['lodging']
          }
          infowindow = new google.maps.InfoWindow();
          service = new google.maps.places.PlacesService(map);
          service.nearbySearch(request, callback);


      }

      function callback(results, status) {
          if (status === google.maps.places.PlacesServiceStatus.OK) {
            results.forEach(createMarker);
          }
      }

      function createMarker(place) {
          var placeLoc = place.geometry.location;
          var marker = new google.maps.Marker({
              map: map,
              icon: {
                  url: 'http://maps.gstatic.com/mapfiles/circle.png',
                  anchor: new google.maps.Point(10, 10),
                  scaledSize: new google.maps.Size(10, 17)
              },
              position: place.geometry.location
          });
          marker.addListener('click', function() {

            var request = {
                reference: place.reference
            };
            service.getDetails(request, function(details, status) {

              infowindow.setContent([
                details.name,
                details.formatted_address,
                details.website,
                details.rating,
                details.formatted_phone_number].join("<br />"));
              infowindow.open(map, marker);
            });

          })
      }
      window.onload = initMap;

    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>