Question

我有兴趣实施一个Google地图搜索按钮，旁边有一个“提交”/“开始”按钮（例如在http://maps.google.com上）。如果我在搜索框中按Enter键，一切都很好，但我不知道如何使用按钮强制/提交搜索。

现在我的代码基于以下示例：https://developers.google.com/maps/documentation/javascript/examples/places-searchbox。最重要的部分是我现在正在使用它：

HTML：

<div id="intro-search">
    <input id="search-box" />
    <button type="button">Submit!</button>
</div>

JS：

  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    // ... 
    // Show the results on the map
    // ...
  }

我不知道如何在点击按钮时触发相同的操作。

另一方面，SearchBox和Autocomplete控件之间有什么区别？他们不是做同样的事吗？

Answer 1

对于SearchBox，您必须在输入字段上使用谷歌地图的触发事件，如此

document.getElementById('my-button').onclick = function () {
    var input = document.getElementById('my-input');

    google.maps.event.trigger(input, 'focus', {});
    google.maps.event.trigger(input, 'keydown', { keyCode: 13 });
    google.maps.event.trigger(this, 'focus', {});

};

Answer 2

要以Alex Beauchemin和Scott Butler的回答为基础，今天（但将来可能不会）适用的非Angular，非jQuery选项是：

document.getElementById('my-button').onclick = function () {
  var input = document.getElementById('my-input');

  function noop() {}

  google.maps.event.trigger(input, 'focus', {});
  google.maps.event.trigger(input, 'keydown', {
    keyCode: 40, // arrow down
    stopPropagation: noop, // because these get called
    preventDefault: noop,
  });  
  google.maps.event.trigger(input, 'keydown', { keyCode: 13 });  // enter
  google.maps.event.trigger(this, 'focus', {});
};

Answer 3

以为如果有人像我一样找到这个帖子，我会分享这个。这似乎对我有用。这是我的指示。所以我在你的输入上，你可以使用

<input id="txtLocation" places-auto-complete autocomplete-select-first-on-enter>

app.directive('autocompleteSelectFirstOnEnter', function() {
    //Requires jquery.simulate
    return function(scope, element, attrs) {
        element.bind("keydown", function(e) {
            if(e.which === 40){
                //if they already clicked down, we don't want to click down again
                element.triggered = true;
            }
            if(e.which === 13 && !element.triggered) {
                //They clicked enter, and haven't clicked down yet, and its not recursive
                element.triggered = true; //keep it from being recursive
                $("input#" + element[0].id).trigger('focus');
                $("input#" + element[0].id).simulate('keydown', { keyCode: 40 } ).simulate('keydown', { keyCode: 13 });
                element.triggered = false; //reset it
            }
        });
        element.bind("focus", function(e) {
            //reset it when they click in the field
            element.triggered = false;
        });
    };
});

Answer 4

在initialize功能中为您的按钮添加一个点击监听器。

类似的东西：

document.getElementById("buttonId").onclick = function(){
    var places = searchBox.getPlaces();
}

通过它，您可以像搜索框的places_changed侦听器一样访问搜索框对象。

Answer 5

您需要添加一个事件监听器，例如：

destiny =  new google.maps.places.SearchBox(document.getElementById('textfield'));
destiny.addListener("places_changed",function(){
            alert("You have selected something");
        });

当用户选择文本位置时，将触发警报。

谷歌地图 - 点击按钮时触发搜索框

5 个答案: