Нужно вручную запустить автозаполнение Google мест - PullRequest
Новая
       7

Нужно вручную запустить автозаполнение Google мест

5 голосов
/ 27 марта 2012

Я пытаюсь настроить автозаполнение в Google местах, используя предопределенные данные, но пока не получилось.

Допустим, у меня есть этот текст "Аляскинский путь на юг, Сиэтл, Вашингтон" в поле ввода, предопределенном так: 

<input id="ev-loc-input" size="60" value="Alaskan Way South, Seattle, WA" />

Я инициализирую автозаполнение Google на нем, и я хотел бы как-то вызвать его, чтобы он искал этот адрес прямо при загрузке страницы.

Кажется, есть только одно задокументированное событие для него "place_changed": 

google.maps.event.addListener(events_autocomplete, 'place_changed', function(){..

Я не могу использовать это, потому что он срабатывает после того, как поиск адреса уже сделан. Я не смог найти список доступных событий - может, кто-нибудь знает?

Любая помощь высоко ценится!

1 Ответ

4 голосов
/ 19 июля 2013

Я наконец понял это!Я работал над этим 2 часа!

В любом случае, вам нужно сосредоточиться на элементе ввода, но вы не можете сделать это сразу.Вам нужно отложить это.

Итак, вот так ... 

setTimeout(func, 2000);
function func() {
    input.focus();
    selectFirstResult();
}

Вот мой код, и он работает. 

$(function() {
    var input = document.getElementById('searchTextField');
    input.value = "{{ $user["location"] }}";//I'm using laravel
    //You won't need the above line if you're already filling in the value of
    //the input field - I'm going to get this working without the map as well
    //I'll come back and post that later this weekend   
    var lat = -33.8688,
    lng = 151.2195,
    latlng = new google.maps.LatLng(lat, lng),
    image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';     
    var mapOptions = {           
            center: new google.maps.LatLng(lat, lng),           
            zoom: 13,           
            mapTypeId: google.maps.MapTypeId.ROADMAP         
        },
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image
         });
    var autocomplete = new google.maps.places.Autocomplete(input, {
        types: ["geocode"]
    });          
    autocomplete.bindTo('bounds', map); 
    var infowindow = new google.maps.InfoWindow(); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
        } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  
        }
        moveMarker(place.name, place.geometry.location);
    });  
    $("input").focusin(function () {
        $(document).keypress(function (e) {
            if (e.which == 13) {
                 selectFirstResult();   
            }
        });
    });
    $("input").focusout(function () {
        if(!$(".pac-container").is(":focus") && !$(".pac-container").is(":visible"))
            selectFirstResult();
    });
     function selectFirstResult() {
        infowindow.close();
        $(".pac-container").hide();
        var firstResult = $(".pac-container .pac-item:first").text();
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({"address":firstResult }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var lat = results[0].geometry.location.lat(),
                lng = results[0].geometry.location.lng(),
                placeName = results[0].address_components[0].long_name,
                latlng = new google.maps.LatLng(lat, lng);
                moveMarker(placeName, latlng);
                $("input").val(firstResult);
            }
        });   
     }
     function moveMarker(placeName, latlng){
        marker.setIcon(image);
        marker.setPosition(latlng);
        infowindow.setContent(placeName);
        infowindow.open(map, marker);
     }
    setTimeout(func, 2000);
    function func() {
        input.focus();
        selectFirstResult();
    }
});
...