如何避免最终用户需要手动启动 Google Places Autocomplete 下拉菜单？

Posted 2023-03-05

【中文标题】如何避免最终用户需要手动启动 Google Places Autocomplete 下拉菜单？

【英文标题】：How to avoid need for end-user to manually start the Google Places Autocomplete dropdown?

【发布时间】：2012-04-11 03:14:37

【问题描述】：

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

假设我在这样预定义的输入字段中有此文本“Alaskan Way South, Seattle, WA”：

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

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

似乎只有一个记录在案的事件“place_changed”：

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

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

非常感谢任何帮助！

【问题讨论】：

@AlexandreBourlier 您链接到的更清洁的解决方案可以解决不同的问题。

【参考方案1】：

我终于明白了！我已经为此工作了 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();
    
);

【讨论】：

使用这段代码让我有强烈的悔恨感。一定有更好的办法。

感到自责？代码没有任何“错误”。自从这篇文章以来，我实际上已经对此进行了更深入的研究，从我可以看出这确实是唯一的方法。我认为这与谷歌使用的延迟加载有关。他们会这样做，这样您的网站就不会坐等 Google 做出回应。所以，这很烦人，但我认为它实际上是因为一件好事而发生的。