javascript 谷歌地图 - 点击按钮触发搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20407045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps - Trigger Search Box on button click
提问by Cosmin SD
I'm interested in implementing a Google Maps search button with a 'Submit'/'Go' button next to it (such as on http://maps.google.com). Everything works great if I press Enter in the search box, but I have no idea how to force/submit the search using the button.
我有兴趣实现一个 Google 地图搜索按钮，旁边有一个“提交”/“开始”按钮（例如在http://maps.google.com 上）。如果我在搜索框中按 Enter，一切都会很好，但我不知道如何使用按钮强制/提交搜索。
Right now I have my code based on the example on: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox. The most important part is that I'm using this for now:
现在我的代码基于以下示例：https://developers.google.com/maps/documentation/javascript/examples/places-searchbox。最重要的部分是我现在正在使用它：
HTML:
HTML：
<div id="intro-search">
<input id="search-box" />
<button type="button">Submit!</button>
</div>
JS:
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
// ...
}
I have no idea how to trigger the same thing on a button click.
我不知道如何在单击按钮时触发同样的事情。
On another note, what is the difference between the SearchBoxand the Autocompletecontrols? Don't they do the same thing?
另一方面，SearchBox和Autocomplete控件之间有什么区别？他们不做同样的事情吗？
回答by Alex Beauchemin
For the SearchBox, you have to use google map's trigger event on the input field like so
对于搜索框，您必须像这样在输入字段上使用谷歌地图的触发事件
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', {});
};
回答by cdunham
To build on Alex Beauchemin's and Scott Butler's answers, a non-Angular, non-jQuery option that works for me today (but may not in the future) is:
为了建立在 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', {});
};
回答by Scott Butler
Thought I'd share this in case someone finds this thread as I did. This seemed to work for me. This is a directive I made. So i on your input, you can use
我想我会分享这个，以防有人像我一样找到这个线程。这似乎对我有用。这是我制定的指令。所以我在你的输入中，你可以使用
<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;
});
};
});
回答by JCHebert
Add a click listener for your button inside the initializefunction.
在initialize函数内为您的按钮添加一个单击侦听器。
Something like :
就像是 ：
document.getElementById("buttonId").onclick = function(){
var places = searchBox.getPlaces();
}
With that you have access to the searchbox object exactly like in the places_changedlistener of the searchbox.
有了它，您就可以像在places_changed搜索框的侦听器中一样访问搜索框对象。
回答by daronwolff
You need add a event listener, for example:
您需要添加一个事件侦听器，例如：
destiny = new google.maps.places.SearchBox(document.getElementById('textfield'));
destiny.addListener("places_changed",function(){
alert("You have selected something");
});
When the user select a text-location, the alert will be fired.
当用户选择文本位置时，将触发警报。
