Question

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

我正在尝试触发按钮点击事件上的地方搜索请求以及标准的回车按键事件（目前工作正常）。我已经梳理了与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);
    }
  }

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已经定义。所有你需要做的，通过按钮触发位置搜索 - 真的 - 到focus与searchBox关联的输入框。你不必与searchBox混合或触发“places_changed”或类似的东西，你可以在其他地方看到它们作为建议 - 但事实上它不起作用。

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

根据上面的google示例更新了工作演示 - ＆gt; http://jsfiddle.net/7JTup/

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

2 个答案: