如何避免最终用户需要手动启动 Google Places Autocomplete 下拉菜单? [英] How to avoid need for end-user to manually start the Google Places Autocomplete dropdown?

问题描述

我正在尝试使用预定义数据让谷歌地点自动完成，但到目前为止还没有运气.

I'm trying to get google places autocomplete working with predefined data but so far no luck.

假设我在如下预定义的输入字段中输入了Alaskan Way South, Seattle, WA":

Lets say I have this text "Alaskan Way South, Seattle, WA" in an input field predefined like this:

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

我在它上面初始化了 googles 自动完成功能，我想以某种方式触发它，以便它在页面加载时立即查找该地址.

I initialize googles autocomplete on it and I would like to somehow trigger it so it looks for this address right when the page loads.

似乎只有一个记录在案的事件place_changed":

There seem to be only one documented event for it "place_changed":

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

我不能使用这个，因为它在地址查找完成后被触发.我找不到可用的活动列表 - 也许有人知道?

I cant use this one cause it gets triggered after the address lookup is already done. I couldn't find a list of events available - maybe anyone knows?

非常感谢任何帮助！

推荐答案

我终于想通了！我已经为此工作了 2 个小时！

I finally figured this out! I've been working on this for 2 hours!

无论如何，你需要专注于你的输入元素，但你不能马上做到.你需要延迟它.

Anyway, you need to focus on your input element, but you can't do it right away. You need to delay it.

所以，像这样...

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

这是我的代码，它有效.

Here is the my code, and it works.

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

这篇关于如何避免最终用户需要手动启动 Google Places Autocomplete 下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！