9

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

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

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

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

2 回答 2

9

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

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

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

JSFiddle demo

于 2014-11-23T20:37:18.553 回答
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 关联的输入框。您不必与 searchBox 混合或触发“places_changed”或类似的东西，您可以在其他地方将其视为建议 - 但实际上不起作用。

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

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

于 2013-10-02T11:04:51.683 回答