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

在等待了两年的谷歌解决方案之后，我实现了一个新项目的解决方法。

该功能正在过滤多个组件限制并将最高结果合并到一个阵列。这意味着特定的结果集将逐一给出。

也许这个解决方案可以进行优化，即所有国家或地区的整个结果都应该采用“重量”和＃34;行政区域，城市和街道。

fiddled脚本是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 =＆＃34; ca＆＃34 ;; //假设此值来自复选框/收音机

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

将自动填充列表中的国家/地区的Google地图限制为“INDIA，USA和UK”

6 个答案: