google place autocomplete pays restriction sur le changement

Question

J'utilise des lieux autocomplete pour trouver des itinéraires dans la carte et fonctionne bien.

J'ai une boîte de sélection avec 2 pays Etats-Unis et AU.When la sélection du changement case i effacer les entrées de saisie semi-automatique et définissez la saisie semi-automatique componentRestrictions = {country: iso_country} avec la nouvelle boîte de sélection de formulaire de valeur du pays.

Lorsque je charge le script pour la première fois, le pays par défaut est US et la saisie semi-automatique ne suggère aucune place à AU. (Jusqu'ici tout va bien)

Quand je charge d'abord le script et change directement le pays en UA, la saisie semi-automatique suggère et place des États-Unis. (Qui pas ce que je veux)

Voici mon code

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

Quelqu'un peut-il me aider à résoudre ce problème.

Answer 1

Je crois que le problème que vous rencontrez est parce que vous essayez de créer une nouvelle instance de Autocomplete sur chaque événement de modification de la zone de sélection. Je suggère de ne pas appeler un opérateur new, mais mettre à jour les propriétés d'instance de saisie semi-automatique existantes à l'aide de la méthode setOptions() de la classe Autocomplete.

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

Jetez un oeil à l'exemple suivant. J'ai créé deux fonctions:

• initAutocomplete() qui est exécuté après le chargement de Maps API JavaScript et définit l'état initial des éléments de saisie semi-automatique

• updateAutocomplete(countryCode) fonction qui est appelée à chaque événement de changement de la boîte de sélection

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>

J'espère que cela aide!