2015-10-19 95 views
3

我目前能夠限制地點只有一個國家,但我也想限制在一個特定的城市也。任何想法如何實現?這是我當前的代碼:如何限制谷歌地點到特定城市

var autocomplete, 
        options = { 
         types: ['geocode'], 
         componentRestrictions: {country: 'est'} 
        }; 
       autocomplete = new google.maps.places.Autocomplete(input, options); 
       google.maps.event.addListener(autocomplete, 'place_changed', function() { 
        var place = autocomplete.getPlace().formatted_address; 
        $(input).attr('value',place); 
       }); 

回答

5

地點自動完成功能目前允許您使用componentRestrictions按國家進行過濾。我會做你的情況是使用選項參數由有問題定義城市的邊界進行過濾:

var cityBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(25.341233, 68.289986), 
    new google.maps.LatLng(25.450715, 68.428345)); 

var options = { 
    bounds: cityBounds, 
    types: ['geocode'], 
    componentRestrictions: {country: 'est'} 
}; 
+0

是它的最後/最終解決方案,以過濾城市basis.was任何人能爲這個做更具體的破解/解決方法的結果。 – user3775217

+0

公共問題跟蹤器https://code.google.com/p/gmaps-api-issues/issues/detail?id=4433中有一項功能請求。但是,Google似乎並沒有對此任務給予高度重視。因此界限偏差是目前唯一的選擇。 – xomena

+1

嗨,這不適合我,請你幫忙。我已經把國家定爲「在」(印度),我已經給了海得拉巴(印度的城市)的界限。但它也顯示了來自其他城市的地區。 – phpfresher

6

由於盧克說,地方自動完成允許您使用componentRestrictions按國家只進行篩選。

但是,您可以對搜索請求字符串使用一些小技巧。 只需在請求中添加城市名稱的前綴。

var prefix = 'Kyiv, '; 

$(input).on('input',function(){ 
    var str = input.value; 
    if(str.indexOf(prefix) == 0) { 
     // string already started with prefix 
     return; 
    } else { 
     if (prefix.indexOf(str) >= 0) { 
      // string is part of prefix 
      input.value = prefix; 
     } else { 
      input.value = prefix+str; 
     } 
    } 
}); 

http://jsfiddle.net/24p1et98/

+0

嗨,有什麼辦法可以在不顯示前綴的情況下執行相同的功能。 – phpfresher

+0

爲此,您需要從Google獲取搜索請求的結果並呈現您自己的自動填充小部件。 看這裏 https://stackoverflow.com/questions/9276580/google-maps-api-v3-anyway-to-retrieve-autocomplete-results-instead-of-dropdown –

+0

嗨,感謝您的鏈接。我會試一試。 – phpfresher

2

谷歌提供了兩種方式來實現這一點。 如果你不滿意,因爲在印度這樣的國家,它效果不好,因爲這裏的州和規定沒有矩形或結構的邊界。

1.LatLngBounds(西南的LatLng,東北的LatLng):在哪裏,你可以給緯度和經度,以形成一個矩形。

2.地點(緯度,經度)&半徑:在哪裏,你可以給緯度和經度,形成一個圓圈。

但是,如果您來自像印度這樣的國家,這些方法不能提供預期的結果,其中狀態和規定不像美國那樣處於結構化形狀(矩形)中。

如果您面臨的問題不是黑客攻擊。 使用jQuery/Jacascript,您可以附加在使用Places API的Autocomplete對象限定的文本輸入中始終保持城市名稱的功能。

這就是:

<script> 
$(document).ready(function(){ 
    $("#locality").val(your-city-name) //your-city-name will have city name and some space to seperate it from actual user-input for example: 「Bengaluru | 」 
    }); 

$("#locality").keydown(function(event) { //locality is text-input box whixh i supplied while creating Autocomplete object 
var localeKeyword = 「your-city-name」 
var localeKeywordLen = localeKeyword.length; 
var keyword = $("#locality").val(); 
var keywordLen = keyword.length; 

if(keywordLen == localeKeywordLen) { 
    var e = event || window.event; 
    var key = e.keyCode || e.which; 

    if(key == Number(46) || key == Number(8) || key == Number(37)){ 
     e.preventDefault(); 
     }//Here I am restricting user to delete city name (Restricting use of delete/backspace/left arrow) if length == city-name provided 

    if(keyword != localeKeyword) { 
     $("#locality").val(localeKeyword); 
     }//If input-text does not contain city-name put it there 
    } 

if(!(keyword.includes(localeKeyword))) { 
    $("#locality").val(localeKeyword); 
    }//If keyword not includes city name put it there 
}); 

相關問題