10

我的要求是只为班加罗尔的地点获取谷歌地点自动完成建议,但我并没有只为班加罗尔或提到的纬度经度范围内获取地点。

我只想在自动完成文本字段中的图像位置下方退休。

在此处输入图像描述

有人可以建议如何实现相同的目标以及我哪里出错了。

Javascript:

<script type="text/javascript">


   function initialize1() {

    var southWest = new google.maps.LatLng( 12.97232, 77.59480 );
    var northEast = new google.maps.LatLng( 12.89201, 77.58905 );
    var bangaloreBounds = new google.maps.LatLngBounds( southWest, northEast );

    var options = {
        bounds: bangaloreBounds,
        types: ['(cities)'],
        componentRestrictions: {country: 'in'}
    };

     var input = document.getElementById('searchTextFieldTo');
     var autocomplete = new google.maps.places.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize1);
</script>

文本域:

<input type="text" id="searchTextFieldTo" class="ui-timepicker-hour" style="width:350px;text-align:left;font-style:italic;" placeholder="Enter To location" autocomplete="on" />
4

5 回答 5

4

Google 提供了两种方法来实现这一点。如果您不满意,因为在印度这样的国家它效果不佳,因为这里的州和规定没有矩形或结构边界。

1.LatLngBounds(LatLng西南,LatLng东北):在这里可以给经纬度组成一个矩形。

2. Location (Lat,Lng) & Radius:你可以在哪里给出纬度和经度来形成一个圆圈。

但是,如果您来自印度等国家/地区,这些方法的问题是它们无法提供预期的结果,这些国家和规定不像美国那样采用结构化形状(矩形)。

如果您面临同样的问题,那就是黑客攻击。使用 jQuery/Jacascript,您可以附加在文本输入中始终保持城市名称的函数,该文本输入与 Places API 的自动完成对象绑定。

这里是:

<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 keyworf not includes city name put it there
    });
</script>

(图片:)在此黑客之前

在此处输入图像描述

(图片:)在这次黑客攻击之后

在此处输入图像描述

于 2017-04-07T05:57:08.227 回答
3

正如我在这里的回答中提到的:

目前无法将结果限制在特定位置。您可以像上面那样使用边界来将结果偏向于,但不限于包含在指定边界内的位置。

如果您认为地域限制是一项有用的功能,请提交Places API - 功能请求

编辑:根据 2018-07,可以定义要检索的地点类型,例如城市(根据 API 是 locality 或 Administrative_area3)。在此处查看完整答案。

于 2012-12-12T05:19:01.740 回答
2

我想你可以试试这个。

var bangaloreBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(12.864162, 77.438610),
    new google.maps.LatLng(13.139807, 77.711895));

var autocomplete = new google.maps.places.Autocomplete(this, {
  bounds: bangaloreBounds,
  strictBounds: true,
});

autocomplete.addListener('place_changed', function () {

});

注意 xomena: strictBounds 选项是在 Maps JavaScript API 3.27 版中添加的,目前(2017 年 1 月)是实验版本。

于 2017-01-13T04:08:53.737 回答
1
function initialize() {

 var bangaloreBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(12.864162, 77.438610),
    new google.maps.LatLng(13.139807, 77.711895));



    var options = {
        bounds: bangaloreBounds,
       
        componentRestrictions: {country: 'in'},
        strictBounds: true,
    };

     var input = document.getElementById('autocomplete');
     var autocomplete = new google.maps.places.Autocomplete(input, options);
   }
   google.maps.event.addDomListener(window, 'load', initialize);
于 2018-04-21T09:06:18.307 回答
0

与此处的 Google javascript Places API 的当前文档一样,您可以定义要检索的地点类型数组。在下面的示例中,我将其设置为仅检索城市(根据 API,它们是 locality 或 Administrative_area3)。您也可以将其设置为检索区域、地址、机构和地理编码。

function initMap() {
        var input = document.getElementById('my-input');
        var options = {
               types: ['(cities)']
                       };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
        // the rest of the code ...
 }
于 2019-01-20T18:58:42.963 回答