13

我有以下 jQuery 代码，可以很好地获取所选国家/地区的城市列表。

var city;   var place;

$('#city').on('focus',function(){
    input = this, options = {
        types: ['(cities)'],
        componentRestrictions: {
            country: $('#country option:selected').val()
            }
    };
    city = new google.maps.places.Autocomplete(input, options);
    google.maps.event.addListener(city, 'place_changed', function() {
        place = city.getPlace();
        $(input).val(place.address_components[0].long_name);
    })
})

基本上，一旦人选择了地点，它就会将输入框中的值替换为没有国家的“城市”值。

City, Country当用户已经选择了一个国家/地区时，在下拉菜单中看起来有点愚蠢，那么如果您定义了一个componentRestrictions将结果限制在一个国家/地区的值，是否有人知道是否可以仅显示城市名称？

一旦做出选择，我发现我目前的设置方法有点......真的很垃圾......

4

4 回答 4

24

调用 Google API 时，指定属性“region”：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=your_key&language=fr&region=FR"></script>

然后，当您创建Autocomplete对象时，在属性中指定国家componentRestriction，以便它反映您指定的区域：

    新的 google.maps.places.Autocomplete(
        $("#my-input-field").get(0),
        {
            组件限制：{国家：“fr”}，
            类型：[“（地区）”]
        }
    );
于 2014-02-10T13:29:51.760 回答
7

您也可以通过 css 帮助自己 - 在自动完成项中隐藏最后一个跨度（=状态）。

.pac-item > span:last-child {
    display: none;
}
于 2014-07-03T19:18:48.843 回答
3

简短的回答是： 中的响应内容Autocomplete由 Google 控制（您在其中一个评论中提到了这一点）并且Autocompleteapi-doc不提供自定义显示的响应文本的方法，除了更改占位符文本开发指南。您使用的解决方案是您拥有的最佳选择（并且有点反应，但我不知道它是否真的“垃圾”）。

除此之外，如果您对这种方法不满意，您总是可以创建自己的输入区域并自己完全控制请求-响应。您可以直接使用 Places Library开发指南并完全控制显示的所有内容。

于 2012-05-21T14:03:52.620 回答
1

我等待 100 毫秒，然后将文本框替换为我想要的内容。

除了在我的情况下，我想要一个空白框，但插入一个空格。

于 2013-11-20T03:13:26.713 回答