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

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

在initialize 函数中为您的按钮添加点击监听器。

类似：

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

这样您就可以访问搜索框对象，就像在搜索框的 places_changed 侦听器中一样。

Answer 2

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

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

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

Answer 3

对于搜索框，您必须像这样在输入字段上使用谷歌地图的触发事件

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 4

我想我会分享这个，以防有人像我一样找到这个帖子。这似乎对我有用。这是我制定的指令。所以我根据你的输入，你可以使用

<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 5

以 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', {});
};