Question

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

我的代码是

<!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>

Answer 1

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

componentRestrictions: {country: "us"}

但是没有办法将结果限制为cities ，但这很大程度上可以达到你想要的效果。如果你正确地设置了你的边界，可能只限于一个城市的区域，它会让你尽可能接近。

例如：

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

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

Google商家信息根据所选城市自动填充

1 个答案: