如何使用附近的Google地方搜索API查找地点详细信息？

单击每个地点图标时，我无法获取地点详细信息。我阅读了文档，并认为我编码正确。任何人有任何建议？它也没有给我所有我应该得到的结果。当真的有30个附近的酒店时，它只输出1个酒店。谢谢。如何使用附近的Google地方搜索API查找地点详细信息？

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); 
    }); 
});

}

来源

2016-03-01 Dalton Wise

你犯错几个百分点。

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

来源

2016-03-01 17:45:40 wf9a5m75

谢谢！这个解决方案完美运作 –

有没有办法在页面加载时显示所有的infowindows？它看起来像我只能显示第一个。 –

如果要打开多个infoWindows，请在createMarker（）而不是initMap（）中创建infoWindows，并且不要使用全局变量。 – wf9a5m75

如何使用附近的Google地方搜索API查找地点详细信息？

回答

相关问题