Google Maps API自动填充搜索,无需从下拉列表中进行选择

Question

我正在使用Google Maps API和自动填充搜索功能.目前,您必须开始键入位置(城市,州,邮政等),然后从地图的下拉列表中选择一个结果,以便在该位置居中.但是,我想制作这个傻瓜证明并进行设置,以便如果有人只是键入一个城市或只是一个州并点击"输入"而不选择自动填充结果,它仍然可以工作.例如,如果有人键入"纽约"并点击"输入"而未在下拉列表中选择结果,则它仍将以纽约为中心.

我假设这是通过从自动完成下拉列表中获取第一个结果来完成的,如果没有手动选择一个.

我已经为表单的提交添加了一个事件监听器,但不确定如何将第一个结果传递给"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

没有实现的方法来访问下拉列表中的位置.基本上你在下拉列表中看到的不是地方,只有预测.选择预测时,将加载预测的详细信息.

因此,您必须以编程方式选择预测.

如何实现它:

除了点击预测之外的另一种方法是使用向下键,键码是40.API监听输入的keydown事件.

所以当你点击回车:

1. 使用键码40(向下)触发keydown

2. 使用键码13触发keydown(输入)

   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/