Google Maps API Wyszukiwanie autouzupełniania bez wybierania z listy rozwijanej

Question

Używam Google Maps API i funkcji wyszukiwania autouzupełniania. Obecnie musisz rozpocząć wpisywanie lokalizacji (miasto, województwo, zip, itp.), A następnie wybrać wynik z listy rozwijanej, aby mapa znalazła się w centrum tej lokalizacji. Chciałbym jednak zrobić ten głupi dowód i skonfigurować go tak, aby po wpisaniu nazwy miasta lub stanu i trafieniu "wprowadź" bez wybrania wyniku autouzupełniania, nadal będzie działać. Na przykład, jeśli ktoś wpisze "Nowy Jork" i uderzy "wprowadź" bez wybrania wyniku w menu rozwijanym, nadal będzie znajdować się w centrum Nowego Jorku.

Zakładam, że jest to osiągnięte przez pobranie pierwszego wyniku z rozwijanego menu autouzupełniania, jeśli nie zostało wybrane ręcznie.

Dodałem detektor zdarzeń do przesłania formularza, ale nie wiem, jak przekazać pierwszy wynik do zmiennej "miejsce".

Oto mój kod:

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

A oto JSFiddle do eksperymentowania.

Answer 1

Nie ma zaimplementowanego sposobu dostępu do miejsc na liście rozwijanej. Zasadniczo to, co widzisz na liście, nie jest miejscami, są tylko przewidywania. Szczegóły predykcji zostaną załadowane po wybraniu prognozy.

Musisz więc programowo wybrać predykcję.

Jak osiągnąć go:

Innym sposobem niż kliknięcie na predykcji jest użycie w dół, klawisz keycode jest 40. API słucha keyDown-wydarzenia wejścia.

Więc kiedy trafisz wpisać:

1. spust keyDown z keycode 40 (dół)

2. wyzwalania keydown z keycode 13 (enter)

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

Uwaga: Aby uniknąć nieskończonej pętli dla wpisz Dodałem niestandardową właściwość triggered, więc " m jest w stanie ominąć wyzwalany keydown wewnątrz funkcji.

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

Answer 2

dodaniu filtru, aby uniknąć keyDown jest inicjowana, gdy użytkownik jest już wybrać dowolny wynik z autouzupeĹ,nianiu:

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

funkcji pomocnika do ustawiania początkowej/domyślne położenie programowo - np z interfejsu API geolokacji.

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

Przykład:

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