Google Maps API自動完成搜索沒有從下拉列表中選擇

我正在使用Google Maps API和自動填充搜索功能。目前，您必須開始輸入位置（城市，州，郵編等），然後從地圖的下拉菜單中選擇一個結果，以便在該位置居中。然而，我想做出這種傻瓜證明，並設置它，以便如果某人只鍵入一個城市或只是一個州，並在未選擇自動填充結果的情況下點擊「輸入」，它仍然可以工作。例如，如果某人鍵入「紐約」並點擊「輸入」，而沒有在下拉菜單中選擇結果，它仍將以紐約爲中心。Google Maps API自動完成搜索沒有從下拉列表中選擇

我假設這是通過從自動完成下拉菜單抓取第一個結果來完成的，如果沒有手動選擇。

我已經爲提交表單添加了一個事件偵聽器，但不知道如何將第一個結果傳遞到「place」變量。

這裏是我的代碼：

function searchBar(map) { 
    var input = document.getElementById('search-input'); 
    var searchform = document.getElementById('search-form'); 
    var place; 
    var options = {componentRestrictions: {country: 'us'}}; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 

    //Add listener to detect autocomplete selection 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     place = autocomplete.getPlace(); 
     center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); 
     map.setCenter(center); 
     map.setZoom(5); 
    }); 

    //Add listener to search 
    searchform.addEventListener('submit', function() { 
     center = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()); 
     map.setCenter(center); 
     map.setZoom(5); 
    }); 

    //Reset the inpout box on click 
    input.addEventListener('click', function(){ 
     input.value = ""; 
    }); 
};

這裏是一個實驗JSFiddle。

來源

2015-01-09 user13286

沒有實現的方式來訪問下拉菜單中的地點。基本上你在下拉列表中看到的不是地方，只有預測。預測的細節將在您選擇預測時加載。

因此，您必須以編程方式選擇預測。

如何實現它：

另一種方法比點擊的預測是使用向下鍵，鍵碼是40 API監聽的keydown事件的輸入。

所以，當你點擊進入：

觸發了鍵碼40（下）

觸發的keydown與鍵碼13的keydown（輸入）

google.maps.event.addDomListener(input,'keydown',function(e){ 
     if(e.keyCode===13 && !e.triggered){ 
    google.maps.event.trigger(this,'keydown',{keyCode:40}) 
    google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true}) 
} 
});

注意：以避免無限循環輸入我已經添加了一個自定義屬性triggered，所以我'能夠繞過功能內觸發的keydown。

演示：http://jsfiddle.net/4nr4tdwz/1/

來源

2015-01-09 19:16:12

偉大的作品，謝謝！ – user13286

毫無疑問，我可以在任何線程中找到最好和最聰明的解決方案。幹得好，發現這個黑客！ –

感謝您的分享。你的代碼很棒！ –

我添加了一個過濾器，以避免KEYDOWN被觸發時用戶已經選擇從自動完成的任何結果：

google.maps.event.addDomListener(input,'keydown',function(e){ 
    if(e.keyCode===13 && $('.pac-item-selected').length == 0 && !e.triggered){ 
    google.maps.event.trigger(this,'keydown',{keyCode:40}) 
    google.maps.event.trigger(this,'keydown',{keyCode:13,triggered:true}) 
    } 
});

來源

2015-05-25 13:52:01 Zirc75

用於編程方式設置初始/默認位置輔助功能 - 例如來自地理位置API。

var triggerLocation = function(autocompleteInput, addressString) { 
    var $locationInput = $(autocompleteInput).val(addressString).trigger('focus'); 
    var maxTries = 500; 

    var autocompleteSelectionInterval = setInterval(function() { 
     if (!--maxTries) { 
      clearInterval(autocompleteSelectionInterval); 
     } 

     if ($('.pac-container .pac-item').length) { 
      google.maps.event.trigger($locationInput[0], 'keydown', { 
       keyCode : 40 
      }); 

      google.maps.event.trigger($locationInput[0], 'keydown', { 
       keyCode : 13 
      }); 

      clearInterval(autocompleteSelectionInterval); 
     } 
    }, 10); 
};

例子：

var autocomplete = new google.maps.places.Autocomplete($('#location')[0]); 
triggerLocation('#location', 'New York');

來源

2016-11-24 12:07:53 kayz1

Google Maps API自動完成搜索沒有從下拉列表中選擇

回答

相關問題