Question

我正在使用名为＆＃39; Retrieving Autocomplete Predictions＆＃39;的Google Maps API示例。我无法弄清楚如何过滤它，所以它只返回美国的地方。我知道如何用其他例子做到这一点......

var input = document.getElementById('searchTextField');
var options = {
      types: ['(cities)'],
      componentRestrictions: {country: 'us'}
    };

autocomplete = new google.maps.places.Autocomplete(input, options);

但我似乎无法弄清楚如何将它应用到我的例子中。这是我的代码......

function GetAddressPredictions(Search) {
    var displaySuggestions = function (predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
        return;
    }
    predictions.forEach(function (prediction) {
        PredictionArray.push(prediction);
    });
};
var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({input: Search}, displaySuggestions);
}

我试过了，但它没有用。

function GetAddressPredictions(Search) {
    var displaySuggestions = function (predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
        return;
    }
    predictions.forEach(function (prediction) {
        PredictionArray.push(prediction);
    });
};
var options = {
    types: ['(cities)'],
    componentRestrictions: {country: 'us'}
      };
    var service = new google.maps.places.AutocompleteService();
    service.getQueryPredictions({input: Search, options}, displaySuggestions);
}

任何想法？感谢。

Answer 1

您非常接近，但遗憾的是，您需要使用getPlacePredictions()代替getQueryPredictions()来获取此特定行为。这样您就可以使用componentRestrictions而AutocompletionRequest QueryAutocompletionRequest不支持componetRestictions的{{3}}，您必须使用bounds来限制范围搜索框或location以偏向搜索，以选择靠近某点的位置。

以下是getPlacePredictions()的解决方案：

  var service = new google.maps.places.AutocompleteService();
  var options = {
    input: Search,
    types: ['(cities)'],
    componentRestrictions: {country: 'us'}
  };
  service.getPlacePredictions(options , displaySuggestions);

如果您必须使用location

执行此操作，则可以将bounds或getQueryPredictions()添加为选项对象的键

Answer 2

函数getQueryPredictions以QueryAutocompletionRequest对象作为参数，而QueryAutocompletionRequest没有将其限制为特定国家/地区的属性。

也就是说，您可以在发送之前简单地将“美国”或“美国”附加到查询中：

service.getQueryPredictions({
   input: 'pizza near Syd' + ' usa'
}, displaySuggestions);

如果您不希望在返回的结果中显示“，USA”，可以使用JavaScript的替换功能将其删除：

predictions.forEach(function(prediction) {
   var li = document.createElement('li');
   li.appendChild(document.createTextNode(prediction.description.replace(', USA', '')));
   document.getElementById('results').appendChild(li);
});

演示：https://jsfiddle.net/sdz4yssL/2/

另请注意，如果搜索字词存在已包含美国或其变体的风险，则您需要先从搜索字词中删除所有匹配项（通常使用正则表达式忽略区分大小写），否则搜索某些内容像“pizza usa usa”将不会返回任何结果：

input: (' ' + 'pizza near us Syd usa United States US' + ' ').replace(/ usa /ig,' ').replace(/ US /ig,' ').replace(/ united states /ig,' ') + ' usa'

（我在查询之前和之后添加了一个空格，以便替换函数在开头和结尾仍然匹配）

Answer 3

你有没有试过这样的事情：

function GetAddressPredictions(Search) {

    var displaySuggestions = function(predictions, status) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
            return;
        }

        predictions.forEach(function(prediction) {
            PredictionArray.push(prediction);
        });
    };

    var service = new google.maps.places.AutocompleteService();
    service.getQueryPredictions({ 
            input: Search, 
            types: ['(cities)'], 
            componentRestrictions: {country: 'us'} 
        }, displaySuggestions);
}

Answer 4

与上述相反，AutocompleteService需要QueryAutocompletionRequest或AutocompletionRequest，所以我认为你传递选项的方式是错误的。这不是简单的：

var options = {
    input: Search, 
    types: ['(cities)'],
    componentRestrictions: {country: 'us'}
};

var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(options, displaySuggestions);

请注意，这是预测偏差的全部你不能要求PAC排除结果，只是偏见。

Answer 5

通过一些搜索，可以找到解决方案。

该请求于今年早些时候获得批准并发布：Google Request

此类信息的文档可以在这里阅读：Google Documentation

<强>实施

HTML：

<div id="text">
  Search Place:
</div>

<div id="locationField">
  <input id="autocomplete" placeholder="Enter text" type="text" />
</div>


<div id="map"></div>

使用全局变量限制哪个国家/地区，英国为英国，美国为美洲等...

var countryRestrict = {
  'country': 'uk'
};
var autocomplete;

然后使用以下内容构建自动完成：

 autocomplete = new google.maps.places.Autocomplete(
     (
      document.getElementById('autocomplete')), {
      componentRestrictions: countryRestrict
    });
  places = new google.maps.places.PlacesService(map);

  autocomplete.addListener('place_changed', onPlaceChanged);

当文本改变时，我们调用onPlacesChanged函数：

function onPlaceChanged() {
  var place = autocomplete.getPlace();
  if (place.geometry) {
    map.panTo(place.geometry.location);
    map.setZoom(5);
    var marker = new google.maps.Marker({
      position: place.geometry.location,
      map: map,
    });
  } else {
    document.getElementById('autocomplete').placeholder = 'Enter a Value';
  }
}

这会调用get place函数并为您单击的值添加标记。

JSFIDDLE：https://jsfiddle.net/hn8091fk/

Google Maps API - 仅限美国的自动填充预测

5 个答案: