Javascript 使用谷歌地点搜索框。如何通过单击按钮启动搜索？

要么我是个白痴，要么这是谷歌地图团队的严重疏忽

我正试图在按钮点击事件上触发一个places搜索请求，同时触发标准的enter keypress事件（目前运行正常）。我已经仔细阅读了与此相关的文档，但没有找到合适的解决方案

出于保密原因，我使用演示中的示例

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

---

这比你想象的要简单。与上述相同的起点

在HTML中添加一个按钮

<button id="button">click</button>

输入

已定义。你所要做的就是，通过一个按钮触发places search（地点搜索），真正的方法是对与搜索框关联的输入框进行聚焦。你不必和搜索框混在一起，也不必触发“地点改变”之类的东西，你可以在别处看到这些建议——但事实上，它们不起作用

我猜你想通过一个按钮“出于某种原因”触发，比如搜索一些特定的预定义-这就是为什么我用“test”触发搜索，只需将输入值设置为test

---

使用工作演示更新，基于上面的google示例->

您需要首先触发输入元素上的

焦点

，然后使用code

13

（输入键）触发

keydown

事件

---

非常感谢！对不起，我刚刚看到这个。我会试试这个，一到办公室就告诉你。这会触发搜索结果下拉列表，填充建议，对吗？但是，是否有任何方法也可以模拟在按下“回车”键时获得的行为？如中所示，当按下按钮时，在地图上显示输入框中输入的结果？@Cosmind，不太明白？默认情况下，google places输入将打开。如果要通过按enter键从另一个源填充，可以轻松地用输入替换按钮，用onkeyup替换onclick-event@jjhenry，很乐意帮忙。您可以向上投票或接受答案：-）我对填充输入不感兴趣，但对执行搜索感兴趣（我认为这也是OP所要求的）。其想法是在其旁边有一个输入和一个按钮，当单击按钮时，得到与按enter键时相同的结果（即进行搜索并在地图上显示结果）。例如，您可以在maps.google.com上看到：一个输入和一个搜索按钮，当点击

Enter

或单击按钮时，搜索就会完成。

  var button = document.getElementById('button'); 
  button.onclick = function() {
    input.value='test';
    input.focus(); 
  }

var input = document.getElementById('target');

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