Google 在更改时设置了自动填充国家/地区限制

Question

我正在使用地点自动完成功能在地图中查找路线并且工作正常。

我有一个包含 2 个国家/地区美国和澳大利亚的选择框。当选择框更改时 我清除自动完成输入并设置自动完成 组件限制 = {国家/地区：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

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

• 加载 Maps JavaScript API 后执行的initAutocomplete()，并设置自动完成元素的初始状态

• updateAutocomplete(countryCode)在选择框的每个更改事件上调用的函数

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

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

<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>

我希望这有帮助！