谷歌地圖自動完成自動選擇第一個建議並在頁面加載時自動提交搜索？

Question

我在我的網頁上使用 Google Maps API v3，目前當頁面加載時，搜索框會預先填充我選擇的搜索詞。 但我需要它來實際然后使用該術語搜索地圖。 我似乎無法僅使用 google 的 API 找到任何方法來執行此操作，因此我想也許我可以使用以下代碼模擬“輸入”按鍵：

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

（ #pac-input是地圖上<input>標簽的 id）

但是，這似乎不起作用。

那么如何在頁面加載時強制搜索？

編輯：這是我正在談論的搜索框

Answer 1

您首先要考慮的不是必須觸發哪個事件，更重要的是知道何時觸發事件。

預測將異步加載，因此您必須等到它們可用。 當預測可用時不會觸發任何事件，但您可以觀察主體的DOMNodeInserted事件（下拉列表將插入那里）並檢查節點是否具有 className 'pac-item'（它是下拉列表中的項目）。

然后必須在輸入上觸發這些事件：

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

注意：在 InternetExplorer 中，從 V9 開始支持DOMNodeInserted事件，在舊版本和其他不支持此事件的瀏覽器中，如果文檔中存在.pac-item ，您可以檢查間隔。

演示： http : //jsfiddle.net/doktormolle/R8XdL/

Answer 2

如果您的用例允許，最簡單的（並且大概是谷歌打算這樣做的）方法是存儲谷歌的 place_id，然后使用新的 google.maps.places.PlacesService.getDetails 方法基於它進行查詢

var service = new google.maps.places.PlacesService(map);
service.getDetails({placeId: $('[name="google_places_id"]').val()}, function(place, status) { do code here });