API di Google Maps Completa la ricerca senza selezionare dal menu a discesa

Question

Sto utilizzando l'API di Google Maps e la funzione di ricerca del completamento automatico. Al momento, è necessario iniziare a digitare una posizione (città, stato, zip, ecc.) E quindi selezionare un risultato dal menu a discesa per centrare la mappa in quella posizione. Tuttavia, mi piacerebbe rendere questo stupido e configurarlo in modo che se qualcuno digita solo una città o solo uno stato e preme "entra" senza selezionare un risultato di completamento automatico, funzionerà comunque. Ad esempio, se qualcuno digita "New York" e preme "entra" senza selezionare un risultato nel menu a discesa, sarà comunque centrato su New York.

Suppongo che ciò avvenga afferrando il primo risultato dal menu a discesa Autocomplete se non si è selezionato manualmente.

Ho aggiunto un listener di eventi per l'invio del modulo, ma non sono sicuro di come passare il primo risultato nella variabile "luogo".

Ecco il mio codice:

function searchBar(map) { 
    var input = document.getElementById('search-input'); 
    var searchform = document.getElementById('search-form'); 
    var place; 
    var options = {componentRestrictions: {country: 'us'}}; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 

    //Add listener to detect autocomplete selection 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     place = autocomplete.getPlace(); 
     center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); 
     map.setCenter(center); 
     map.setZoom(5); 
    }); 

    //Add listener to search 
    searchform.addEventListener('submit', function() { 
     center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); 
     map.setCenter(center); 
     map.setZoom(5); 
    }); 

    //Reset the inpout box on click 
    input.addEventListener('click', function(){ 
     input.value = ""; 
    }); 
}; 

Ed ecco un JSFiddle per la sperimentazione.

Answer 1

Non esiste un modo implementato per accedere ai luoghi nel menu a discesa. Fondamentalmente ciò che vedi nel menu a discesa non sono posti, ci sono solo previsioni. I dettagli di una previsione verranno caricati quando si seleziona una previsione.

Quindi è necessario selezionare una previsione a livello di codice.

come raggiungerlo:

Un altro modo che cliccando su una previsione è quello di utilizzare il tasto verso il basso, il codice chiave è 40. L'API ascolta TastoGiù-eventi dell'ingresso.

Quindi, quando si preme immettere:

1. grilletto keyDown con un keycode 40 (verso il basso)

2. grilletto keydown con un keycode 13 (entrare)

   google.maps.event.addDomListener(input,'keydown',function(e){ 
        if(e.keyCode===13 && !e.triggered){ 
       google.maps.event.trigger(this,'keydown',{keyCode:40}) 
       google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true}) 
   } 
   }); 
   

Nota: per evitare un ciclo infinito per immettere Ho aggiunto una proprietà personalizzata triggered, quindi I ' m in grado di bypassare il keydown attivato all'interno della funzione.

Demo: http://jsfiddle.net/4nr4tdwz/1/

Answer 2

ho aggiunto un filtro per evitare keydown essere attivato quando l'utente ha già selezionare qualsiasi risultato dal completamento automatico:

google.maps.event.addDomListener(input,'keydown',function(e){ 
    if(e.keyCode===13 && $('.pac-item-selected').length == 0 && !e.triggered){ 
    google.maps.event.trigger(this,'keydown',{keyCode:40}) 
    google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true}) 
    } 
}); 

Answer 3

funzione di supporto per l'impostazione della posizione iniziale/default di programmazione - per esempio dall'API di geolocalizzazione.

var triggerLocation = function(autocompleteInput, addressString) { 
    var $locationInput = $(autocompleteInput).val(addressString).trigger('focus'); 
    var maxTries = 500; 

    var autocompleteSelectionInterval = setInterval(function() { 
     if (!--maxTries) { 
      clearInterval(autocompleteSelectionInterval); 
     } 

     if ($('.pac-container .pac-item').length) { 
      google.maps.event.trigger($locationInput[0], 'keydown', { 
       keyCode : 40 
      }); 

      google.maps.event.trigger($locationInput[0], 'keydown', { 
       keyCode : 13 
      }); 

      clearInterval(autocompleteSelectionInterval); 
     } 
    }, 10); 
}; 

Esempio:

var autocomplete = new google.maps.places.Autocomplete($('#location')[0]); 
triggerLocation('#location', 'New York');