谷歌地图自动搜索页面加载 [英] Google Maps auto search on page load

问题描述

我在我的网页上使用Google Maps API v3，并且当前网页加载时，搜索框会预先填入我选择的搜索字词。但我需要它实际上然后使用该术语搜索地图。我似乎无法找到任何方式只使用谷歌的API，所以我想也许我可以使用这段代码模拟'输入'按键：

  var e = jQuery.Event（keydown）; 
 e.which = 13; 
 $（＃pac-input）。trigger（e）; 
  

（＃pac-input 是id $ b

然而，这似乎不起作用。

那么我该如何强制在页面加载上进行搜索？

编辑：
这是我正在谈论的搜索框

解决方案

您必须考虑的第一件事不是要触发哪个事件，更重要的是了解何时来触发事件。

预测将被异步加载，所以您必须等到它们可用。当预测可用时，不会触发任何事件，但您可以观察正文的 DOMNodeInserted -event（下拉列表将被插入），并检查节点是否有className'pac-item'（它是下拉列表项的className）。

然后这些事件必须在输入时触发：

1. keydown with keyCode：40
   （移至下拉菜单中的第一个预测）


2. keydown with keyCode：13
   （选择/激活预测）
   
3. focus
   （激活输入）
   
4. keydown with keyCode：13
   （发送请求）

示例：

  var input = document.getElementById（'pac-input'），
 ac = new google.maps.places.SearchBox（input），
 itemsloaded = google.maps.event 
 .addDomList （e.target.className ==='pac-item'）{
 //删除监听器
 google.maps.event.removeListener（itemsloaded）; 
 //触发事件
 google.maps.event.trigger（输入，'keydown'，{keyCode：40}）
 google.maps.event.trigger（输入，'keydown' ，{keyCode：13}）
 google.maps.event.trigger（input，'focus'）
 google.maps.event.trigger（input，'keydown'，{keyCode：13}）
} 
}）; 
  

注意：在InternetExplorer中， DOMNodeInserted code> -event从V9开始支持，在旧版本和其他不支持此事件的浏览器中，如果 .pac-item 目前在文档中。



演示： http：// jsfiddle。 net / doktormolle / R8XdL /

I am using Google Maps API v3 on my webpage and currently when the page loads, the search box gets pre-populated with a search term I choose. But I need it to actually then search maps using that term. I can't seem to find any way to do this using only google's API, so I thought perhaps I could simulate an 'enter' key press using this code:

var e = jQuery.Event("keydown");
e.which = 13;
$("#pac-input").trigger(e);

(#pac-input is the id of the <input> tag on the map)

However this doesn't seem to work.

So how can I force a search on the page load?

EDIT: This is the search box I'm talking about

解决方案

The first thing you have to think about is not which event has to be triggered, it's more important to know when to trigger the events.

The predictions will be loaded asynchronously, so you must wait until they are available. There will not fire any event when the predictions are available, but you may observe the DOMNodeInserted-event of the body(the dropdown will be inserted there) and check if the nodes have the className 'pac-item' (it's the className of the items in the dropdown).

Then these events must be triggered on the input:

1. keydown with keyCode:40 (to move to the first prediction in the dropdown)
2. keydown with keyCode:13 (to select/activate the prediction)
3. focus (to activate the input)
4. keydown with keyCode:13 (to send the request)

Example:

  var input          =  document.getElementById('pac-input'),
      ac              = new google.maps.places.SearchBox(input),
      itemsloaded    =  google.maps.event
                          .addDomListener(document.body,
                                          'DOMNodeInserted',
                                          function(e){ 
                            if(e.target.className==='pac-item'){
                              //remove the listener
                              google.maps.event.removeListener(itemsloaded);
                              //trigger the events
                              google.maps.event.trigger( input, 'keydown', {keyCode:40})
                              google.maps.event.trigger( input, 'keydown', {keyCode:13})
                              google.maps.event.trigger( input, 'focus')
                              google.maps.event.trigger( input, 'keydown', {keyCode:13})
                            }
                          });

Note: In InternetExplorer the DOMNodeInserted-event is supported since V9, in older versions and other browsers that didn't support this event you may check in intervals if there are .pac-item present in the document.

Demo: http://jsfiddle.net/doktormolle/R8XdL/

这篇关于谷歌地图自动搜索页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！