使用Google地方信息搜索框。如何通过点击按钮来启动搜索？ [英] Using Google Places Search Box. How to initiate a search by clicking a button?

问题描述

我试图在一个按钮上触发地点搜索请求点击事件与标准回车键事件（目前工作正常）相结合。我已仔细阅读与 Google地方信息搜索框相关的文档，发现没有任何可填写的内容解决方案。

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

 函数初始化（）{
 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），
 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 = []; 
 
 $ b document.getElementById（'button'）。addEventListener（'click'，function（）{
 var places = searchBox.getPlaces（）; 
 
 // places  - > undefined 
 
 //假设我可以在searchBox 
 //上调用getPlaces，但是在'places'中没有任何内容
 //超出它甚至不会打电话给谷歌的地方API 
 
 //目前执行搜索的唯一方法是通过按输入
 //这不是非常明显的用户。
 
}，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，
尺寸：新增google.maps.Size（71,71），
来源：新增google.maps.Point（0，0），
 anchor：新增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）; 
 
 
 
 $ div $解析方案

你需要首先在input元素上触发 focus ，然后用代码 13触发 keydown 事件（enter key）。

  var input = document.getElementById（'target'）; 
 
 google.maps.event.trigger（input，'focus'）
 google.maps.event.trigger（输入，'keydown'，{
 keyCode：13 
}）; 
  

JSFiddle演示

Either I am an idiot or this was an egregious oversight on the part of the Google Maps team.

I am attempting to trigger a places search request on a button click event in conjunction with the standard enter keypress event (which is currently working fine). I have combed through the documentation related to the Google Places search box and have found no sutiable solution.

Because of confidentiality reasons I am using the example from the demo.

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

解决方案

You need to first trigger focus on the input element, then trigger a keydown event with code 13 (enter key).

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

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

JSFiddle demo

这篇关于使用Google地方信息搜索框。如何通过点击按钮来启动搜索？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！