限制谷歌地图自动完成仅限于英国地址

时间:2011-08-24 17:07:13

标签: google-maps

我一直在看这个例子:

http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

并决定将其纳入我的网站。

是否可以仅将地址限制为英国地址?

7 个答案:

答案 0 :(得分:30)

试试这个:

var input = document.getElementById('searchTextField');
var options = {
   types: ['(cities)'],
   componentRestrictions: {country: 'tr'}//Turkey only
};
var autocomplete = new google.maps.places.Autocomplete(input,options);

答案 1 :(得分:4)

虽然系统中有功能请求,但您无法严格/严格限制找到的位置,但您可以设置偏差'在结果上。作为google maps bounds对象,它作为自动填充方法的参数传入。然后,自动填充将支持这些边界内的位置。但请注意,由于这不是一个硬边界,如果在边界外有搜索匹配,它将返回那些。

根据我的使用情况,它看起来有点儿麻烦并且可以使用一些改进 - 特别是考虑到你边界以外的任何东西都没有被接近标记,所以在边界之外的一个区块就像在外面1000英里的地方一样,所以一定要努力让边界正常工作。

答案 2 :(得分:4)

您可以截取JSONP功能返回的google.maps.places.Autocomplete结果,并根据需要使用它们,例如按国家/地区限制并显示结果。

基本上,您在head元素上重新定义了appendChild方法,然后监视Google自动完成代码插入到JSONP的DOM中的javascript元素。添加javascript元素后,您将覆盖Google定义的JSONP回调,以便访问原始自动填充数据。

这有点像黑客攻击,这里(我使用jQuery但是这个黑客无需工作):

//The head element, where the Google Autocomplete code will insert a tag 
//for a javascript file.
var head = $('head')[0];  
//The name of the method the Autocomplete code uses to insert the tag.
var method = 'appendChild';  
//The method we will be overriding.
var originalMethod = head[method];

head[method] = function () {
  if (arguments[0] && arguments[0].src && arguments[0].src.match(/GetPredictions/)) {  //Check that the element is a javascript tag being inserted by Google.
    var callbackMatchObject = (/callback=([^&]+)&|$/).exec(arguments[0].src);  //Regex to extract the name of the callback method that the JSONP will call.
    var searchTermMatchObject = (/\?1s([^&]+)&/).exec(arguments[0].src);  //Regex to extract the search term that was entered by the user.
    var searchTerm = unescape(searchTermMatchObject[1]);
    if (callbackMatchObject && searchTermMatchObject) {
      var names = callbackMatchObject[1].split('.');  //The JSONP callback method is in the form "abc.def" and each time has a different random name.
      var originalCallback = names[0] && names[1] && window[names[0]] && window[names[0]][names[1]];  //Store the original callback method.
      if (originalCallback) {
        var newCallback = function () {  //Define your own JSONP callback
          if (arguments[0] && arguments[0][3]) {
            var data = arguments[0][4];  //Your autocomplete results
            //SUCCESS! - Limit results here and do something with them, such as displaying them in an autocomplete dropdown.
          }
        }

        //Add copy all the attributes of the old callback function to the new callback function. This prevents the autocomplete functionality from throwing an error.
        for (name in originalCallback) {  
          newCallback[name] = originalCallback[name];
        }
        window[names[0]][names[1]] = newCallback;  //Override the JSONP callback
      }
    }

  //Insert the element into the dom, regardless of whether it was being inserted by Google.
  return originalMethod.apply(this, arguments);
};

答案 3 :(得分:2)

James Alday是对的:

http://code.google.com/apis/maps/documentation/javascript/places.html#places_autocomplete

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(49.00, -13.00),
  new google.maps.LatLng(60.00, 3.00));

var acOptions = {
  bounds: defaultBounds,
  types: ['geocode']
};
这有点令人讨厌,因为搜索达勒姆给了北卡罗来纳州达勒姆作为第二个结果,无论你如何试图说服它到区域偏见 - 你可以将它设置为视口地图边界,它仍然会尝试建议NC state ... jQuery解决方案可以在这里找到,但似乎没有提供与v3 API一样多的结果。 http://code.google.com/p/geo-autocomplete/

答案 4 :(得分:1)

你要做的最好的方法是自己查询地点api并在你的国家/地区附加查询过的字符串。或者,当然,使用geo-autocomplete jQuery plugin

答案 5 :(得分:0)

只需将地图的Google域名更改为您所在的国家/地区域名,它就会自动在您所在的国家/地区内搜索:

所以:     http://maps.google.com/maps/api/geocode/xml?address= {0}&安培;传感器=假安培;语言= EN

要:     http://maps.google.nl/maps/api/geocode/xml?address= {0}&安培;传感器=假安培;语言= NL

答案 6 :(得分:0)

尝试这样的事情。

// Change Bangalore, India to your cities boundary.
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 () {
});