将谷歌地图自动填充限制为仅英国地址

Question

我一直在查看以下示例：

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

并决定将其合并到我的网站中。

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

Answer 1

试试这个：

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

Answer 2

您不能严格/硬限制它找到的位置，尽管系统中有一个功能请求这样做，但您可以对结果设置“偏差”。它作为谷歌地图边界对象的参数传递给自动完成方法。然后，自动完成将优先考虑这些边界内的位置。但请注意，由于这不是硬边界，因此如果边界之外的搜索存在匹配项，它将返回这些匹配项。

从我的使用情况来看，它似乎有点问题，可以进行一些改进 - 特别是考虑到边界之外的任何东西都不会被接近度标记，因此边界之外一个街区的东西与 1000 英里之外的东西一样有可能显示，所以确保你努力让边界发挥作用。

Answer 3

您可以拦截返回的 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);
};

Answer 4

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 状态...可以在此处找到 jQuery 解决方案，但似乎没有提供与 v3 API 一样多的结果。
http://code.google.com/p/geo-autocomplete/

Answer 5

执行此操作的最佳方法是自己查询地方 api 并将查询的字符串附加到您的国家/地区。当然，也可以使用 geo-autocomplete jQuery 插件。

Answer 6

只需将地图的谷歌域名更改为您所在的国家/地区域名，它就会自动仅在您所在的国家/地区内进行搜索：

所以：
http://maps.google.com/maps/api/geocode/xml?地址={0}&sensor=false&language=en

至：
http://maps.google.nl/maps/api/geocode/xml?地址={0}&传感器=false&语言=nl

Answer 7

尝试这样的事情。

// 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 () {
});

Answer 8

我发现，如果您将地图大致设置为您想要的位置，然后为其设置边界，搜索将首先找到该区域中的位置。您不必实际展示地图。

它比先随机提供海外地址效果更好，设置为国家/地区不起作用。

自动完成获取 latln 的代码是：

    <div id="map_canvas"></div>
        <input type="text" name="location" id="location" placeholder="Type location...">
        <input type="text" name="loc_latitude" id="latitude">
        <input type="text" name="loc_longitude" id="longitude">

and the JS is:

$(document).ready(function () {

          var mapOptions = {
              center: new google.maps.LatLng(52.41041560, -1.5752999),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);

    var autocomplete;
    autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
        types: ['geocode'],
    });
    
    autocomplete.bindTo('bounds', map);
    
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        var near_place = autocomplete.getPlace();
        document.getElementById('latitude').value = near_place.geometry.location.lat();
        document.getElementById('longitude').value = near_place.geometry.location.lng();
    });
});

$(document).on('change', '#'+searchInput, function () {
    document.getElementById('latitude').value = '';
    document.getElementById('longitude').value = '';
});

不完全是您所要求的，但它对我有用。