如何限制谷歌地点搜索到特定城市

Question

我目前能够将地点限制在一个国家，但我也想限制在特定城市。有什么想法可以实现吗？这是我目前的代码：

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);
                });

- fishera

Answer 1

正如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;
        }
    }
});

http://jsfiddle.net/24p1et98/

- Alexey Muravyov

---

嗨，有没有办法在不显示前缀的情况下执行相同的功能？ - phpfresher

为此，您需要从Google获取搜索请求的结果并呈现自己的自动完成小部件。 请看这里 https://dev59.com/qmDVa4cB1Zd3GeqPdGl6 - Alexey Muravyov

Answer 2

目前，Places Autocomplete 允许您使用 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'}
};

- luke_mclachlan

---

这是按城市筛选结果的最后解决方案吗？有没有人能够找到更加具体的黑客/解决方法？ - user3775217

在公共问题跟踪器https://code.google.com/p/gmaps-api-issues/issues/detail?id=4433中有一个功能请求。然而，看起来Google并没有给这个任务设置高优先级。所以目前只有边界偏置是唯一的选择。 - xomena

嗨，这对我不起作用，你能帮忙吗？ 我已经将国家设置为“印度”，并给出了海得拉巴（印度城市）的边界。但它正在显示来自其他城市的地点。 - phpfresher

Answer 3

谷歌提供了两种方法来实现这一点。如果您不满意，因为在印度等国家，由于这里的州和规定没有矩形或结构边界，它不能很好地工作。 1.LatLngBounds (LatLng southwest, LatLng northeast)：您可以给出经度和纬度以形成一个矩形。 2.位置（Lat、Lng）& 半径：您可以给出经度和纬度以形成一个圆。

但是，这些方法的问题是，如果您来自像印度这样的国家，那里的州和规定不像美国那样有结构化形状（矩形），则无法提供预期结果。

如果您遇到相同的问题，则有一个hack。 使用jQuery/Jacascript，您可以附加函数，这些函数将始终在与Places API的Autocomplete对象绑定的文本输入中保持城市名称。

下面是代码：

<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
});

- Ravi Upadhyay