使用 Google 地方信息搜索框。如何通过单击按钮启动搜索？答案

【问题标题】：Using Google Places Search Box. How to initiate a search by clicking a button?使用 Google 地方信息搜索框。如何通过单击按钮启动搜索？
【发布时间】：2013-10-07 10:52:21
【问题描述】：

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

我正在尝试结合标准输入按键事件（当前工作正常）触发按钮单击事件上的位置搜索请求。我梳理了与Google Places search box 相关的文档，但没有找到合适的解决方案。

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

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

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers google-places-api

【解决方案1】：

这比你想象的要简单。起点同上，https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

在 HTML 中添加一个按钮

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

在initialize() 中将其添加到最后，在} 之前：

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

input 已定义。要通过按钮触发地点搜索，您所要做的就是 - 实际上 - 到 focus 与搜索框关联的输入框。您不必与 searchBox 混合或触发“places_changed”或类似的东西，您可以在其他地方将其视为建议 - 但实际上不起作用。

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

根据上面的谷歌示例更新了工作演示 -> http://jsfiddle.net/7JTup/

【讨论】：

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

【解决方案2】：

您需要先在输入元素上触发focus，然后使用代码13（回车键）触发keydown事件。

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

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

JSFiddle demo

【讨论】：