将自动完成列表中国家/地区的 Google 地图限制为“印度、美国和英国”

Question

此代码不起作用。请告诉我确切的解决方案

<script src="maps.googleapis.com/maps/api/…; type="text/javascript"></script>
<script type="text/javascript">
   function initialize() {
      var input = document.getElementById('searchTextField');
      /* restrict to multiple cities? */
      var options = {
          types: ['(cities)'],
          componentRestrictions: {country: ["usa", "uk"]}
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options); 
   }
   google.maps.event.addDomListener(window, 'load', initialize);
</script>

更新

2017 年 1 月，Maps JavaScript API 3.27 版中引入了多个国家/地区过滤器自动完成功能：

您现在可以将自动完成预测限制为仅来自多个国家/地区的显示。您可以通过在 AutocompleteOptions 的 componentRestrictions 字段中指定最多 5 个国家/地区来做到这一点。

https://developers.google.com/maps/documentation/javascript/releases#327

Answer 1

首先，您不能从多个国家/地区进行过滤。这是一个已知问题reported here。

那么对于您的代码，您必须使用两个字符串作为国家/地区代码：

componentRestrictions 可用于将结果限制为特定的 团体。目前，您可以使用 componentRestrictions 进行过滤 国家。国家/地区必须作为两个字符传递，ISO 3166-1 与 Alpha-2 兼容的国家/地区代码。 Source.

这里是一个单独的国家working sample我 jsfiddled（取自Google samples list）。

Answer 2

这是我一直在使用的一种解决方法，方法是操纵多个自动完成 div 的位置：

    var location = $('#location');
var options1 =  { 
                    types: ['(cities)'],
                    componentRestrictions: {country: 'uk'}
                }
var options2 =  { 
                    types: ['(cities)'],
                    componentRestrictions: {country: 'irl'}
                }
if (location.exists()) { 
    $(location).each(function(index){
        new google.maps.places.Autocomplete(this, options2);
        new google.maps.places.Autocomplete(this, options1);
    });
 var pressed = 0;
            google.maps.event.addDomListener(this, 'keydown', function(e){
            if (e.keyCode == 40 || e.keyCode == 38) { 
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
            }
        },true); 
    location.keypress(function(e) {
        setTimeout(function(e){
            setInterval(function(e){
            if($('.pac-container.pac-logo').last().css('display') != 'none' ){
                $('.pac-container.pac-logo').first().children('.pac-item').appendTo($('.pac-container.pac-logo').last())
            }
            else{
                $('.pac-container.pac-logo').last().children('.pac-item').appendTo($('.pac-container.pac-logo').first())
            }
            },100)

        }
        ,300)
    });
}

css：

.pac-container.pac-logo:last-of-type {
     box-shadow: none !important;
}
.pac-container.pac-logo:last-of-type:after {
    content: none !important;
}

Answer 3

在等待谷歌的解决方案两年后，我已经意识到一个新项目的解决方法。

该功能是过滤多个组件限制并将顶部结果合并到一个数组中。这意味着具体的结果集是一个接一个地给出的。

也许这个解决方案可以优化，即所有国家或地区的整体结果都应该针对行政区域、城市和街道的“权重”。

修改后的脚本是here。

主要功能（之后有回调的多个请求）：

       service = new google.maps.places.AutocompleteService();
       var request1 = {
         input: inputData,
         componentRestrictions: {country: 'de'},
       };
       var request2 = {
         input: inputData,
         componentRestrictions: {country: 'at'},
       };
       var request3 = {
         input: inputData,
         componentRestrictions: {country: 'ch'},
       };
       $('#result').empty();
       service.getPlacePredictions(request1, callback);
       service.getPlacePredictions(request2, callback);            
       service.getPlacePredictions(request3, callback);   

Answer 4

Just to update，在 2017 年 1 月发布 Maps JavaScript API 3.27 版后，多个国家/地区过滤器可以传递一系列字符串国家/地区代码。

Answer 5

为什么您不使用单选按钮/复选框等来获取多个国家/地区的地址，也许这对你们有用。 var valueofcountry=“ca”； // 假设这个值来自复选框/收音机

    var autoCompleteOptions = {componentRestrictions: {country: valueofcountry}};

Answer 6

我终于找到了解决这个问题的办法..我希望这段代码能正常工作..试试这个

// FOR SPECIFIC COUNTRY 'INDIA' ONLY 
var options = {
    types: ['(cities)'],
    componentRestrictions: {country: "IN"}
};

autocomplete = new google.maps.places.Autocomplete(document.getElementById('text_box_id'), options);
/*  When the user selects an address from the dropdown,
    populate the address fields in the form. */
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
});

// FOR SPECIFIC COUNTRY 'US' ONLY 
var options = {
    types: ['(cities)'],
    componentRestrictions: {country: "US"}
};

autocomplete = new google.maps.places.Autocomplete(document.getElementById('text_box_id'), options);
/*  When the user selects an address from the dropdown,
    populate the address fields in the form. */
google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
});