Fatal编程技术网
  • javascript/
  • Javascript 谷歌根据所选城市放置自动完成

Javascript 谷歌根据所选城市放置自动完成

javascript jquery html google-maps-api-3

Javascript 谷歌根据所选城市放置自动完成,javascript,jquery,html,google-maps-api-3,Javascript,Jquery,Html,Google Maps Api 3,我想在选择选项类型中显示基于所选城市的自动完成。当用户选择与所选城市不匹配的不同位置时，是否有方法执行此任务或显示错误 我的代码是 <!DOCTYPE html> <html> <head> <title>Map</title> <script src="jquery-2.1.1.min.js"></script> </head> <body> <form action=""

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

我的代码是

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


地图
卡尔纳尔
孟买
班加罗尔
函数初始化（）{
$（'#city'）。关于（'change'，function（））{
var city=$（'#city'）.val（）；
警报（城市）；
})
var input=document.getElementById（'location'）；
变量选项={
类型：['（区域）]，
组件限制：{country:“ind”}
};
autocomplete=newgoogle.maps.places.autocomplete（输入，选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
您可以通过以下方式对国家/地区进行限制：

componentRestrictions: {country: "us"}
但是没有办法将结果限制在城市，但是这将在很大程度上实现您想要的结果。如果你设置的边界正确，可能限制在城市的范围内，这将使你尽可能接近当前的边界

例：

当用户选择与所选城市不匹配的不同地区时，是否有显示错误的方法，就像您必须实现一些自定义逻辑一样。请启动它，让谷歌知道你对这个功能请求感兴趣。 
var input = document.getElementById( 'searchTextField' );
var options = {
  bounds: yourBounds,
  types: ['geocode']
};

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