javascript - 谷歌自动完成 setComponentRestrictions

Question

设置 setComponentRestrictions 值有什么限制吗？因为它在设置动态值时不起作用。

场景 1(工作正常)

在这种情况下，我对县值进行了硬编码，以仅搜索该国家/地区的特定城市。因此，当我使用硬编码值时，它工作正常。

var input = document.getElementById('searchCity');
var options = { types: ['(cities)'],componentRestrictions: {country: 'us' }};
var autoComplete = new google.maps.places.Autocomplete(cityInput,options);`

场景 2(不工作)

在此，我有另一个文本字段，我用它来使用自动完成查找国家/地区并将 short_code 值存储在 shortNameCountry Id 中。但是当我传递动态值时这不起作用。

var input = document.getElementById('searchCity');
var countryOpt = $("#shortNameCountry").val().toLowerCase();
var options = {types: ['(cities)'], componentRestrictions: {country: countryOpt }};
var autoComplete = new google.maps.places.Autocomplete(input,options);

(我已经添加了我的场景。但我不知道 stackoverflow 一直要求我添加更多细节。我只是写这行来解决那个警报。) 请帮我解决这个问题。

Answer 1

当前，您的代码使用属性 componentRestrictions，当您创建自动完成时，该属性将具有输入的值。

要更改此属性，您必须在输入值更改时调用方法 setComponentRestrictions。

function initialize() {

        var iso           = ['AD','AE','AF','AG','AI','AL','AM','AO','AQ','AR','AS','AT','AU','AW','AX','AZ','BA','BB','BD','BE','BF','BG','BH','BI','BJ','BL','BM','BN','BO','BQ','BR','BS','BT','BV','BW','BY','BZ','CA','CC','CD','CF','CG','CH','CI','CK','CL','CM','CN','CO','CR','CU','CV','CW','CX','CY','CZ','DE','DJ','DK','DM','DO','DZ','EC','EE','EG','EH','ER','ES','ET','FI','FJ','FK','FM','FO','FR','GA','GB','GD','GE','GF','GG','GH','GI','GL','GM','GN','GP','GQ','GR','GS','GT','GU','GW','GY','HK','HM','HN','HR','HT','HU','ID','IE','IL','IM','IN','IO','IQ','IR','IS','IT','JE','JM','JO','JP','KE','KG','KH','KI','KM','KN','KP','KR','KW','KY','KZ','LA','LB','LC','LI','LK','LR','LS','LT','LU','LV','LY','MA','MC','MD','ME','MF','MG','MH','MK','ML','MM','MN','MO','MP','MQ','MR','MS','MT','MU','MV','MW','MX','MY','MZ','NA','NC','NE','NF','NG','NI','NL','NO','NP','NR','NU','NZ','OM','PA','PE','PF','PG','PH','PK','PL','PM','PN','PR','PS','PT','PW','PY','QA','RE','RO','RS','RU','RW','SA','SB','SC','SD','SE','SG','SH','SI','SJ','SK','SL','SM','SN','SO','SR','SS','ST','SV','SX','SY','SZ','TC','TD','TF','TG','TH','TJ','TK','TL','TM','TN','TO','TR','TT','TV','TW','TZ','UA','UG','UM','US','UY','UZ','VA','VC','VE','VG','VI','VN','VU','WF','WS','YE','YT','ZA','ZM','ZW'];
            goo           =  google.maps,
            input         = document.getElementById('searchCity'),
            country       = document.getElementById('shortNameCountry'),
            options       = {types: ['(cities)']},
            autoComplete  = new google.maps.places.Autocomplete(input,options);
        
        goo.event.addDomListener(country,'input',function(){
          var val=this.value.trim().toUpperCase();
          if(iso.indexOf(val)>-1){
            this.style.background='white';
            input.value=' ';
            autoComplete
            .setComponentRestrictions({country:val});
            
          }
          else{
            this.style.background='red';
          }
        });
        goo.event.trigger(country,'input');
        
      }

      google.maps.event.addDomListener(window, 'load', initialize);

<input id="searchCity"/>
  <input id="shortNameCountry" size="2" maxlength="2" value="de"/>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places"></script>