Question

我正在使用Google Maps API和自动填充搜索功能。目前，您必须开始键入位置（城市，州，邮政等），然后从地图的下拉列表中选择一个结果，以便在该位置居中。但是，我想制作这个傻瓜证明并进行设置，以便如果某人只是打了一个城市或只是一个州并且点击了＃34;输入＆＃34;如果不选择自动填充结果，它仍然有效。例如，如果有人输入＆＃34;纽约＆＃34;然后点击＆＃34;进入＆＃34;如果没有在下拉列表中选择结果，它仍将以纽约为中心。

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

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

这是我的代码：

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事件。

所以当你点击回车：

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

使用键码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}) 
 }
});

注意：为了避免输入的无限循环，我添加了自定义属性triggered，因此我能够绕过函数内部触发的keydown

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

Answer 2

我添加了一个过滤器，以避免在用户已从自动完成中选择任何结果时触发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

用于以编程方式设置初始/默认位置的辅助功能 - 例如来自地理位置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 Maps API自动填充搜索，无需从下拉列表中进行选择

3 个答案: