如何使用附近的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查找地點詳細信息？

回答

相關問題