使用Google Maps API自動填充地址

Question

我正在嘗試使用Google Maps JavaScript API中的Places庫來獲取完成部分英國地址的建議列表。 這是我迄今為止的進展演示 。 調用Google Places API的代碼是：

var service = new google.maps.places.AutocompleteService();
var query = document.getElementById("address").value;
var restrictions = {country: 'uk'};
service.getPlacePredictions({ 
    input: query, 
    types: ['address'], 
    componentRestrictions: restrictions},  displaySuggestions);

如果我提交部分地址，例如“Lowther Road”，我會收到如下建議：

• Lowther Road，伯恩茅斯，英國
• Lowther Road，鄧斯特布爾，英國
• Lowther Road，Stanmore，英國

我的問題是我想要一個匹配地址列表，而不是地方。 即使我包括門牌號碼，例如通過提交部分地址“79 Lowther Road”，返回的建議仍然不是完整的地址，因為郵政編碼丟失了

• 79 Lowther Road，伯恩茅斯，英國
• 79 Lowther Road，Dunstable，UK
• 79 Lowther Road，Stanmore，英國

是否可以向Google提交部分地址，並獲取匹配（完整）地址列表？

Answer 1

如果您對通過AutocompleteService獲得的每個預測執行地點詳細信息請求，則可以獲得完整地址。 您應該創建google.maps.places.PlacesService的實例，並為預測中的每個地點ID執行getDetails() 。

請注意，獲取詳細信息是異步工作的，因此您應該使用Promises獲取所有詳細信息並將其顯示在<ul>列表中。

看看我根據您的代碼創建的示例

 // This example retrieves autocomplete predictions programmatically from the // autocomplete service, and displays them as an HTML list. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function search() { var displaySuggestions = function(predictions, status) { if (status != google.maps.places.PlacesServiceStatus.OK) { alert(status); return; } document.getElementById("results").innerHTML = ''; var arrPr = []; predictions.forEach(function (prediction) { arrPr.push(getPredictionDetails(prediction.place_id)); }); Promise.all(arrPr).then(function(results) { results.forEach(function(result) { //console.info('Result: ' + JSON.stringify(result, 4)); var li = document.createElement('li'); li.appendChild(document.createTextNode(result.formatted_address)); document.getElementById('results').appendChild(li); }); }).catch(err => { console.log(err); }); }; function getPredictionDetails(placeId) { let promise = new Promise( (resolve, reject) => { placeService.getDetails({ placeId: placeId }, function(result, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { resolve(result); } else { reject(status); } }); }); return promise; } var query = document.getElementById("address").value; var restrictions = {country: 'uk'}; var service = new google.maps.places.AutocompleteService(); var placeService = new google.maps.places.PlacesService(document.getElementById("results")); service.getPlacePredictions({ input: query, types: ['address'], componentRestrictions: restrictions }, displaySuggestions); } 

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #right-panel { font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #right-panel select, #right-panel input { font-size: 15px; } #right-panel select { width: 100%; } #right-panel i { font-size: 12px; } 

 <div id="right-panel"> <input id="address" placeholder="UK address" value="79 Lowther Road"/> <button type="button" onclick="search()">Submit</button> <p>Results:</p> <ul id="results"></ul> </div> <!-- Replace the value of the key parameter with your own API key. --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places" async defer></script> 

您也可以訪問https://jsfiddle.net/xomena/z9tndphr/2/查看此示例

我希望這有幫助！