Question

我正在使用地方自动填充功能在地图中查找路线并且工作正常。

我有一个包含2个美国和澳大利亚国家的选择框。当选择框发生变化时我清除自动完成输入并设置自动完成 componentRestrictions = {country：iso_country}，带有新的国家/地区值表单选择框。

当我第一次加载脚本时，默认国家/地区是美国，自动完成功能不建议来自AU的任何地方。（到目前为止一直很好）

当我第一次加载脚本并直接将国家/地区更改为AU时，自动完成功能就是建议并且来自美国。（这不是我想要的）

这是我的代码

/*
 * When initialize
 * i apply autocomplete to the inputs
 */

if($("#from_place").length)
{
        apply_autocomplete($("#from_place")[0],default_iso_code);
    }
    if($("#to_place").length)
{
        apply_autocomplete($("#to_place")[0],default_iso_code);
}


/*
 * When the Select Box change 
 * i apply autocomplete to the inputs again with new iso_country
 */

$(document).on('change','#map_country_id',function() 
{
    var iso_country = $(this).val();

    //clear from/to
    $("#from_place").val('');
    $("#to_place").val('');

    //autocomplete from/to with new country
    if($("#from_place").length)
    {
        apply_autocomplete($("#from_place")[0],iso_country);
    }
    if($("#to_place").length)
    {
            apply_autocomplete($("#to_place")[0],iso_country);
        }
});

/*
 * the function that applies the autocomplete 
 * 
 */

function apply_autocomplete(input,iso_country)
{   
    var options = {
        componentRestrictions: {country: iso_country}
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);     
    autocomplete.bindTo('bounds', map);
}

任何人都可以帮我解决这个问题。

Answer 1

我相信您遇到的问题是因为您尝试在选择框的每个更改事件上创建一个新的自动完成实例。我建议不要调用new运算符，而是使用自动完成类的setOptions()方法更新现有的自动完成实例属性。

https://developers.google.com/maps/documentation/javascript/reference#Autocomplete

看看以下示例。我创建了两个函数：

initAutocomplete()在加载Maps JavaScript API并执行自动完成元素的初始状态后执行
updateAutocomplete(countryCode)函数

＆＃13;

var default_iso_code = 'US';
var autocomplete_from, autocomplete_to;

function initAutocomplete() {
  var options = {
      componentRestrictions: {country: default_iso_code}
  };
  if($("#from_place").length) {
    autocomplete_from = new google.maps.places.Autocomplete($("#from_place")[0], options); 
  }
  if($("#to_place").length) {
    autocomplete_to = new google.maps.places.Autocomplete($("#to_place")[0], options); 
  }

  $(document).on('change','#map_country_id',function() {
    var iso_country = $(this).val();

    //clear from/to
    $("#from_place").val('');
    $("#to_place").val('');

    updateAutocomplete(iso_country);
  });
}

function updateAutocomplete(countryCode) {
  var options = {
      componentRestrictions: {country: countryCode}
  };
  if (autocomplete_from) {
    autocomplete_from.setOptions(options);
  }
  if (autocomplete_to) {
    autocomplete_to.setOptions(options);
  }
}

＆＃13;

#from_place, #to_place {
  position: relative;
  width: 480px;
}
#autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 99%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="locationField">
      <select id="map_country_id">
        <option value="US">United States</option>
        <option value="AU">Australia</option>
      </select>
      <br/>
      <br/>
      <input id="from_place" placeholder="From place" type="text"></input>
      <input id="to_place" placeholder="To place" type="text"></input> 
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&libraries=places&callback=initAutocomplete" async defer></script>

＆＃13;

我希望这有帮助！

谷歌地方自动完成国家限制的变化

1 个答案: