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

Posted 2023-02-23

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

【英文标题】：limit Google maps of countries in the autocomplete list to "INDIA, USA and UK"

【发布时间】：2012-07-02 16:40:58

【问题描述】：

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

<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

【问题讨论】：

它必须是精确的解决方案！

@elclanrs Lmao :P, OP - man whats the relationship between autocomplete and google-map 详细说明你的问题 lil more bru！

您的脚本标签中忘记了双引号

我想展示，1。如果用户在文本框中输入“美国”（文本框应该是自动完成）然后谷歌地图显示“美国”地图 2.如果用户输入“英国”然后谷歌地图显示“英国”地图在自动完成文本框中国家应该是美国和英国跨度>

您的意思是在输入地址时希望地图将您带到您输入的地方？

【参考方案1】：

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

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

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

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

【参考方案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;

【讨论】：

在 Google 决定花费 1 分钟的开发时间进行更新之前，这是您能得到的最好的结果

【参考方案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);   

【参考方案4】：

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

【参考方案5】：

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

    var autoCompleteOptions = componentRestrictions: country: valueofcountry;

【参考方案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();
);