Google Maps API - 僅限美國的自動填充預測

Question

我正在使用名為“ 檢索自動填充預測 ”的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 ，您必須回退到使用bounds將搜索范圍限制為一個框或location以使搜索偏向一個點附近的偏好位置。

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

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

如果必須使用getQueryPredictions()執行此操作，可以將location或bounds添加為選項對象的鍵

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/

另請注意，如果搜索條件存在風險，包括美國或其變體，則您需要先從搜索條件中刪除所有出現的內容（通常使用正則表達式來忽略區分大小寫），否則請搜索“披薩”之類的內容美國美國“將不會返回任何結果：

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采用了EITHER 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文檔

執行：

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/