我目前只能将地点限制在一个国家/地区,但我也想限制特定城市。任何想法如何实现?这是我目前的代码:
var autocomplete,
options = {
types: ['geocode'],
componentRestrictions: {country: 'est'}
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace().formatted_address;
$(input).attr('value',place);
});
答案 0 :(得分:9)
正如Luke所说,地方自动填充功能允许您使用componentRestrictions按国家/地区进行过滤。
但是您可以使用搜索请求字符串的小技巧。 只需在请求中添加带有城市名称的前缀。
var prefix = 'Kyiv, ';
$(input).on('input',function(){
var str = input.value;
if(str.indexOf(prefix) == 0) {
// string already started with prefix
return;
} else {
if (prefix.indexOf(str) >= 0) {
// string is part of prefix
input.value = prefix;
} else {
input.value = prefix+str;
}
}
});
答案 1 :(得分:6)
地方自动填充功能目前允许您使用componentRestrictions按国家/地区进行过滤。在你的情况下我会做的是使用options参数来过滤定义相关城市的边界:
var cityBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(25.341233, 68.289986),
new google.maps.LatLng(25.450715, 68.428345));
var options = {
bounds: cityBounds,
types: ['geocode'],
componentRestrictions: {country: 'est'}
};
答案 2 :(得分:2)
Google提供了两种实现此目标的方法。 如果您不满意,因为在印度这样的国家,它不能很好地运作,因为这里的州和条款没有矩形或结构边界。
1.LatLngBounds(LatLng southwest,LatLng northeast):您可以在其中给出经度和经度以形成矩形。
<强> 2。位置(Lat,Lng)&amp;半径:您可以在其中给出经度和经度以形成圆圈。
但是如果你来自像印度这样的国家和条款不像美国那样的结构形状(矩形),这些方法的问题就不能提供预期的结果。
如果你遇到同样的问题而不是黑客攻击。 使用jQuery / Jacascript,您可以附加功能,这些功能将在文本输入中始终保持城市名称,并与Places API的自动完成对象绑定。
这是:
<script>
$(document).ready(function(){
$("#locality").val(your-city-name) //your-city-name will have city name and some space to seperate it from actual user-input for example: “Bengaluru | ”
});
$("#locality").keydown(function(event) { //locality is text-input box whixh i supplied while creating Autocomplete object
var localeKeyword = “your-city-name”
var localeKeywordLen = localeKeyword.length;
var keyword = $("#locality").val();
var keywordLen = keyword.length;
if(keywordLen == localeKeywordLen) {
var e = event || window.event;
var key = e.keyCode || e.which;
if(key == Number(46) || key == Number(8) || key == Number(37)){
e.preventDefault();
}//Here I am restricting user to delete city name (Restricting use of delete/backspace/left arrow) if length == city-name provided
if(keyword != localeKeyword) {
$("#locality").val(localeKeyword);
}//If input-text does not contain city-name put it there
}
if(!(keyword.includes(localeKeyword))) {
$("#locality").val(localeKeyword);
}//If keyword not includes city name put it there
});