Google 地图 API 自动完成搜索而不从下拉列表中选择

Question

我正在使用 Google 地图 API 和自动完成搜索功能。目前，您必须开始输入位置（城市、州、邮政编码等），然后 select 下拉菜单的结果才能使地图以该位置为中心。但是，我想做一个简单的证明并设置它，这样如果有人只键入一个城市或一个州并点击 "enter" 而没有 select 自动完成结果，它仍然可以工作。例如，如果有人键入 "New York" 并点击 "enter" 而没有 select 在下拉列表中输入结果，它仍将以纽约为中心。

如果不是手动 selected，我假设这是通过从自动完成下拉列表中获取第一个结果来完成的。

我已经为提交表单添加了一个事件侦听器，但不确定如何将第一个结果传递到 "place" 变量。

这是我的代码：

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

这里有一个 JSFiddle 用于实验。

Answer 1

没有实现方法来访问下拉列表中的位置。基本上你在下拉列表中看到的不是地点，只有预测。当您 select 预测时，将加载预测的详细信息。

因此您必须select 以编程方式进行预测。

如何实现：

另一种点击预测的方法是使用向下键，键码是 40。API 监听输入的按键事件。

所以当您按下回车键时：

使用键码 40（向下）触发 keydown

使用键码 13（输入）触发按键

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

注意：为了避免 enter 的无限循环，我添加了自定义属性 triggered，所以我可以绕过在函数内部触发 keydown。

演示：http://jsfiddle.net/4nr4tdwz/1/

Answer 2

我添加了一个过滤器，以避免在用户已经 select 自动完成的任何结果时触发 keydown：

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

用于以编程方式设置 initial/default 位置的辅助函数 - 例如来自地理位置 API.

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

示例：

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

Google 地图 API 自动完成搜索而不从下拉列表中选择

Google Maps API Autocomplete search without selecting from dropdown

javascript

google-maps-api-3

autocomplete