根据所选城市的 Google 地方信息自动填充答案

【问题标题】：Google Places autocomplete according to selected city根据所选城市的 Google 地方信息自动填充
【发布时间】：2016-12-16 06:14:48
【问题描述】：

我想在选择选项类型中显示基于所选城市的自动完成功能是否有任何方法可以执行此任务或在用户选择与所选城市不匹配的不同位置时显示错误

我的代码是

<!DOCTYPE html>
<html>
<head>
  <title>Map</title>
  <script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<form action="">  
<select name="city" id="city">
    <option value="Karnal">Karnal</option>
    <option value="Mumbai">Mumbai</option>
    <option value="Banglore">Banglore</option>
</select>

<input type="text" name="location" id="location">
<input type="submit" name="submit" id="submit" value="Submit">
</form>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2WulC6fdCHMwJUypDOiEWUstYLT2iXxQ&v=3.exp&sensor=false&libraries=places,geometry"></script>
<script type="text/javascript">
function initialize() {

$('#city').on('change', function() {
  var city = $('#city').val();
  alert(city);
})

var input = document.getElementById('location');
var options = {
  types: ['(regions)'],
  componentRestrictions: {country: "ind"}
 };

autocomplete = new google.maps.places.Autocomplete(input, options);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>

【问题讨论】：

标签： javascript jquery html google-maps-api-3

【解决方案1】：

您可以使用以下方式限制国家/地区：

componentRestrictions: {country: "us"}

但是没有办法将结果限制为仅cities，但这将在很大程度上实现您想要的。如果您正确设置了 yourBounds，可能仅限于一个城市的区域，它将让您尽可能靠近。

例如：

var input = document.getElementById( 'searchTextField' );
var options = {
  bounds: yourBounds,
  types: ['geocode']
};

autocomplete = new google.maps.places.Autocomplete( input, options );

【讨论】：

当用户选择与所选城市不匹配的不同地点时，是否有方法显示错误，例如nobroker.in
你必须为此实现一些自定义逻辑
还有issue 4433。请给它加星标，让 Google 知道您对此功能请求感兴趣。