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

我感兴趣的是实现一个谷歌地图搜索按钮，旁边有一个“提交”/“转到”按钮（比如on）。如果我在搜索框中按Enter键，一切都很好，但我不知道如何使用该按钮强制/提交搜索

现在我有了基于以下示例的代码：。最重要的是我现在正在使用这个：

HTML:

我不知道如何在点击按钮时触发同样的事情

---

另一方面，和控件之间的区别是什么？它们不是做了同样的事情吗？

在

初始化

函数中为您的按钮添加一个单击侦听器

比如：

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

---

这样，您就可以访问searchbox对象，就像在searchbox的

places\u changed

侦听器中一样。

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

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

---

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

对于搜索框，您必须在输入字段上使用谷歌地图的触发事件，如下所示

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

};

---

我想我会分享这个，以防有人像我一样发现这个线索。这似乎对我有用。这是我的指示。所以我在你的输入上，你可以使用

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

---

在Alex Beauchemin和Scott Butler的答案的基础上，一个非角度、非jQuery的选项现在（但将来可能不会）对我有效：

---

谢谢你的回答。问题是getPlaces（）返回“Undefined”。显然，没有“回车”就没有必要获取位置？或者可能是因为在

单击事件之前，输入失去焦点，结果（以及结果本身）的下拉列表消失。如果您想强制用户使用该按钮，您必须删除搜索框的
位置\u changed
侦听器，这样，单击下拉列表中的一个选项（或按enter键）将不会触发事件并更改地图。您必须确保搜索框有一个值。问题是关于使用提交按钮，当输入不在焦点时，“places\u changed”事件不起作用这起作用！我缺少的是奇怪的空函数。你能给我解释一下它在做什么吗？所以stopPropagation和preventDefault字段需要调用函数，所以需要做一些事情。在我的例子中，我不需要做任何事情，所以我在那里放了一个不做任何事情的函数（函数）。省略它或null会导致错误。非常感谢！这正是我要找的！它甚至在IE11中也能工作！我在编辑页面上使用的案例不起作用。这在控制台窗口上有效吗
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', {});

};

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

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