将自动填充列表中的国家/地区的Google地图限制为“INDIA,USA和UK”
此代码无效。 请告诉我确切的解决方案
function initialize() { var input = document.getElementById('searchTextField'); /* restrict to multiple cities? */ var options = { types: ['(cities)'], componentRestrictions: {country: ["usa", "uk"]} }; var autocomplete = new google.maps.places.Autocomplete(input, options); } google.maps.event.addDomListener(window, 'load', initialize);
UPDATE
2017年1月,Maps JavaScript API版本3.27中引入了多个国家/地区过滤自动完成function:
您现在可以将自动填充预测限制为仅覆盖多个国家/地区。 您可以通过在AutocompleteOptions的componentRestrictions字段中指定最多5个国家/地区来执行此操作。
https://developers.google.com/maps/documentation/javascript/releases#327
首先,您无法从多个国家/地区进行过滤。 这是一个已知的问题。
然后,对于您的代码,您必须使用两个字符的字符串作为国家/地区代码:
componentRestrictions可用于将结果限制为特定组。 目前,您可以使用componentRestrictions按国家/地区进行过滤。 该国家/地区必须通过两个字符ISO 3166-1 Alpha-2兼容国家/地区代码。 来源 。
这是一个我jsfiddled的一个国家的工作样本 (取自谷歌样本列表 )。
这是我通过操纵多个自动完成div的位置一直在使用的工作:
var location = $('#location'); var options1 = { types: ['(cities)'], componentRestrictions: {country: 'uk'} } var options2 = { types: ['(cities)'], componentRestrictions: {country: 'irl'} } if (location.exists()) { $(location).each(function(index){ new google.maps.places.Autocomplete(this, options2); new google.maps.places.Autocomplete(this, options1); }); var pressed = 0; google.maps.event.addDomListener(this, 'keydown', function(e){ if (e.keyCode == 40 || e.keyCode == 38) { e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); } },true); location.keypress(function(e) { setTimeout(function(e){ setInterval(function(e){ if($('.pac-container.pac-logo').last().css('display') != 'none' ){ $('.pac-container.pac-logo').first().children('.pac-item').appendTo($('.pac-container.pac-logo').last()) } else{ $('.pac-container.pac-logo').last().children('.pac-item').appendTo($('.pac-container.pac-logo').first()) } },100) } ,300) }); }
CSS:
.pac-container.pac-logo:last-of-type { box-shadow: none !important; } .pac-container.pac-logo:last-of-type:after { content: none !important; }
在等待了两年的谷歌解决方案后,我意识到了一个新项目的解决方法。
该函数正在过滤多个组件限制并将顶部结果合并到一个arrays。 这意味着特定的结果集一个接一个地给出。
也许这种解决方案可以得到优化,即所有国家或地区的整体结果都应该用于行政区域,城市和街道的“重量”。
这个摆弄的脚本就在这里 。
主要function(之后带回调的多个请求):
service = new google.maps.places.AutocompleteService(); var request1 = { input: inputData, componentRestrictions: {country: 'de'}, }; var request2 = { input: inputData, componentRestrictions: {country: 'at'}, }; var request3 = { input: inputData, componentRestrictions: {country: 'ch'}, }; $('#result').empty(); service.getPlacePredictions(request1, callback); service.getPlacePredictions(request2, callback); service.getPlacePredictions(request3, callback);
为了更新 ,在2017年1月发布版本的3.27版Maps JavaScript API后,可以通过一系列字符串国家/地区代码过滤多个国家/地区。
为什么你没有单选按钮/复选框等来获取多个国家的地址也许这对你们有用。 var valueofcountry =“ca”; //假设这个值来自checkbox / radio
var autoCompleteOptions = {componentRestrictions: {country: valueofcountry}};
最后我得到了这个问题的解决方案..我希望这段代码能够正常运行
// FOR SPECIFIC COUNTRY 'INDIA' ONLY var options = { types: ['(cities)'], componentRestrictions: {country: "IN"} }; autocomplete = new google.maps.places.Autocomplete(document.getElementById('text_box_id'), options); /* When the user selects an address from the dropdown, populate the address fields in the form. */ google.maps.event.addListener(autocomplete, 'place_changed', function() { fillInAddress(); }); // FOR SPECIFIC COUNTRY 'US' ONLY var options = { types: ['(cities)'], componentRestrictions: {country: "US"} }; autocomplete = new google.maps.places.Autocomplete(document.getElementById('text_box_id'), options); /* When the user selects an address from the dropdown, populate the address fields in the form. */ google.maps.event.addListener(autocomplete, 'place_changed', function() { fillInAddress(); });