Wie erhalten Sie die Namen der Stadt als Antwort auf das ausgewählte Land?

Question

Ich brauche die Namen der Städte nicht in Übereinstimmung mit dem ausgewählten Land. Ich habe Dropdown-Liste der Länder aus der Datenbank.

Standardmäßig können Benutzer Städte aus dem Feld wählen, d. H. Keine Einschränkung. Aber wenn sie Land auswählen, sollte das Ergebnis in Städten nur die Städte dieses Landes erhalten.

google.maps.event.addDomListener(window, 'load', intiGoogleLocation); 
     function intiGoogleLocation() { 
      var options = { 
       types: ['(cities)'] 
      }; 
      if (typeof country !== 'undefined') { 
       options.componentRestrictions = {country: country}; 
      } 

      function fillInAddress() { 
       //some custom logic 
      } 


     var input = document.getElementById('cities'); 
     var autocomplete = new google.maps.places.Autocomplete(input, options); 
     autocomplete.addListener('place_changed', fillInAddress); 
     } 

So Frage ist, wie ich die Option zurückgesetzt haben, so dass ich das Land zu options.componentRestrictions

Answer 1

Beachten Sie die change -event der Dropdown festlegen und die componentRestrictions der zur automatischen Vervollständigung auf den gewünschten Wert eingestellt (basierend auf dem ausgewählten Dropdown-item)

function intiGoogleLocation() { 
 
    function fillInAddress() { 
 
    //some custom logic 
 
    console.log('place-name:'+this.getPlace().name); 
 
    } 
 

 
    var list   = document.getElementById('countries'), 
 
     input   = document.getElementById('cities'), 
 
     autocomplete = new google.maps.places.Autocomplete(input, { 
 
       types: ['(cities)'] 
 
     }); 
 
    
 
    google.maps.event.addListener(autocomplete,'place_changed', fillInAddress); 
 
    
 
    google.maps.event.addDomListener(list,'change', function(e){ 
 
    
 
    var componentRestrictions={}; 
 
    
 
    if(this.value!==''){ 
 
     componentRestrictions.country=this.value 
 
    } 
 
    
 
    autocomplete.setComponentRestrictions(componentRestrictions); 
 
    input.value=''; 
 
    if(e){ 
 
     autocomplete.set('place',{name:''}); 
 
    } 
 
      
 
     
 
    }); 
 
    google.maps.event.trigger(list,'change',null); 
 
}

<select id="countries"> 
 
    <option value="">any country</option> 
 
    <option value="de">Germany</option> 
 
    <option value="it">Italy</option> 
 
    <option value="fr">France</option> 
 
    <option value="gb">Great Britain</option> 
 
</select> 
 
<input id="cities"/> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=intiGoogleLocation&libraries=places" async defer></script>