使用Google商家信息搜索框.如何通过单击按钮启动搜索？

Question

要么我是白痴,要么就是谷歌地图团队的一个令人震惊的疏忽.

我试图在按钮单击事件上触发一个位置搜索请求,并结合标准的输入按键事件(当前正常工作).我已经梳理了与Google地方信息搜索框相关的文档,但没有找到任何可用的解决方案.

出于保密原因,我使用了演示中的示例.

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

Answer 1

您需要先focus在输入元素上触发,然后keydown使用代码13(输入键)触发事件.

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

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

JSFiddle demo

Answer 2

它比你想象的更简单。与上面相同的起点，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已经定义了。要通过按钮触发地点搜索，您所要做的就是点击与focussearchBox 关联的输入框。您不必与 searchBox 混合或触发“places_changed”或类似的东西，您可以在其他地方看到这些建议 - 但实际上不起作用。

我想您想“出于某种原因”通过按钮触发，例如搜索某些特定的预定义 - 这就是为什么我用“测试”触发搜索，只需设置要测试的输入值即可。

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