javascript - 使用 Google Maps API 自动完成地址

Question

我正在尝试使用 Google Maps JavaScript API 中的 Places 库来获取完成部分英国地址的建议列表。这是一个 demo of my progress to date .调用 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
• 英国邓斯特 bool 洛瑟路
• 英国斯坦莫尔洛瑟路

我的问题是我想要一个匹配地址的列表，而不是地点。即使我包括门牌号，例如通过提交部分地址“79 Lowther Road”，返回的建议仍然不是完整的地址，因为缺少邮政编码

• 79 Lowther Road, Bournemouth, 英国
• 79 Lowther Road, 邓斯特 bool , 英国
• 79 Lowther Road, Stanmore, 英国

是否可以向 Google 提交部分地址，并获得匹配(完整)地址的列表？

Answer 1

如果您对通过 AutocompleteService 获得的每个预测执行地点详细信息请求，您可以获得完整的地址。您应该创建 google.maps.places.PlacesService 的实例并执行 getDetails()对于您在预测中拥有的每个地点 ID。

请注意，获取详细信息是异步工作的，因此您应该使用 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/ 查看此示例

希望对您有所帮助!