如何在 Google 地点 API 中使用附近的搜索功能查找地点详细信息

How to find place details using nearby search in Google places api?

本文关键字：搜索 功能 查找 详细信息 Google 地点 API      更新时间：2023-09-26

我无法获取单击每个地点图标时要显示的地点详细信息。我阅读了文档，并认为我编码正确。有人有什么建议吗？它也没有给我所有我应该得到的结果。当实际上大约有 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);
  });
});

}

你弄错了几点。

  1. 对于 service.getDetails（） 方法，您传递 reference 属性的place_id，但正确的是 place.reference，而不是 place_id。

  2. 你不应该在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>
相关文章：