使用Google地方信息搜索框。如何通過點擊按鈕來啓動搜索？

要麼我是個白癡，要麼這是Google地圖團隊中一個令人震驚的疏忽。使用Google地方信息搜索框。如何通過點擊按鈕來啓動搜索？

我試圖觸發一個按鈕點擊事件的地方搜索請求結合標準輸入按鍵事件（目前工作正常）。我已經梳理了與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); 
    } 
    }

來源

2013-10-01 jjhenry

這比您想象的要簡單。與上面相同的起點，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-02 11:04:51 davidkonrad

由於一噸！對不起，我只是看到這一點。我會試試這個，一旦我進了辦公室就讓你知道。 – jjhenry

這會觸發搜索結果下拉列表中填充建議，對吧？但是，還有什麼方法可以模擬點擊「Enter」時獲得的行爲嗎？如何在顯示輸入框中輸入時按下按鈕時的結果？ –

@CosminSD，不太明白？ google地點輸入默認爲。如果您想通過點擊回車來填充其他來源，您可以輕鬆地用輸入替換按鈕，並使用onkeyup事件 – davidkonrad

需要將輸入元件上第一觸發focus，然後觸發事件與代碼13（回車鍵）。

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

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

JSFiddle demo

來源

2014-11-23 20:37:18 MrUpsidown

使用Google地方信息搜索框。如何通過點擊按鈕來啓動搜索？

回答

相關問題