Question

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

}

Answer 1

你错了几点。

对于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>

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

1 个答案: