谷歌的地方自動完成國家對變化的限制

Question

我使用的地方自動完成在地圖中找到路線，並工作正常。

我有兩個國家美國和AU.When一個選擇框選擇框變化 我清除自動完成輸入和設置自動完成 componentRestrictions = {國家：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

看一看下面的例子。我創建了兩個功能：正在加載地圖Javascript API後執行，並將有關調用的選擇框的每一個變化事件自動完成元素

updateAutocomplete(countryCode)功能的初始狀態

• initAutocomplete()

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>

我希望這有助於！