javascript 使用 Google Places 搜索框。如何通过单击按钮启动搜索？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19113477/
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
Using Google Places Search Box. How to initiate a search by clicking a button?
提问by jjhenry
Either I am an idiot or this was an egregious oversight on the part of the Google Maps team.
要么我是个白痴，要么这是谷歌地图团队的一个令人震惊的疏忽。
I am attempting to trigger a places search request on a button click event in conjunction with the standard enter keypress event (which is currently working fine). I have combed through the documentation related to the Google Places search boxand have found no sutiable solution.
我试图结合标准的输入按键事件（目前工作正常）在按钮点击事件上触发地点搜索请求。我已经梳理了与Google Places 搜索框相关的文档，但没有找到合适的解决方案。
Because of confidentiality reasons I am using the example from the demo.
由于保密原因，我使用演示中的示例。
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
document.getElementById('button').addEventListener('click', function() {
var places = searchBox.getPlaces();
// places -> undefined
// The assumption is that I could just call getPlaces on searchBox
// but get nothing in 'places'
// Beyond that it doesn't even make a call to the Google Places API
// Currently the only way to perform the search is via pressing enter
// which isn't terribly obvious for the user.
}, false)
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds()
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
}
回答by MrUpsidown
You need to first trigger focuson the input element, then trigger a keydownevent with code 13(enter key).
您需要先focus在输入元素上触发，然后keydown用代码13（回车键）触发事件。
var input = document.getElementById('target');
google.maps.event.trigger(input, 'focus')
google.maps.event.trigger(input, 'keydown', {
keyCode: 13
});
回答by davidkonrad
It is more simple than you think. With same starting point as above, https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
它比你想象的更简单。与上述相同的起点，https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
Add a button to the HTML
在 HTML 中添加按钮
<button id="button">click</button>
in initialize()add this to the very end, before }:
在initialize()此添加到了最后，前}：
var button = document.getElementById('button');
button.onclick = function() {
input.value='test';
input.focus();
}
inputis already defined. All you have to do, to trigger the places search by a button is - really - to focusthe input box associated with the searchBox. You dont have to mingle with searchBox or trigger "places_changed" or anything like that, which you can see elsewhere as suggestions - but in fact is not working.
input已经定义。所有你需要做的，通过一个按钮触发地点搜索 - 实际上 - 到focus与 searchBox 关联的输入框。您不必与 searchBox 混在一起或触发“places_changed”或类似的东西，您可以在其他地方将其视为建议 - 但实际上不起作用。
I guess you want to trigger by a button "for some reason", like searching for some specific predifined - thats why I trigger the search with "test", simply by setting the input value to test.
我猜你想“出于某种原因”通过一个按钮触发，比如搜索一些特定的预定义——这就是为什么我用“测试”触发搜索，只需将输入值设置为测试。
Updated with working demo, based on the google example above -> http://jsfiddle.net/7JTup/
更新了工作演示，基于上面的谷歌示例 -> http://jsfiddle.net/7JTup/
