javascript - 从Google Places返回多种类型的autocompleteService.getPlacePredictions

我正在尝试为Google Places自动完成功能实现自定义UI，因为预建的UI不允许我手动选择结果。当不使用getPlacePredictions函数选项中的多种类型时，一切正常，但是当我使用['(regions)'，'(cities)']时，状态返回“无效请求”

我做错什么了还是无法返回多种类型？

var _this = this;

this.input = $('#zipcode_autocomplete');

this.service = new google.maps.places.AutocompleteService();

this.input.on('input', function() {
  return _this.service.getPlacePredictions({
    input: _this.input.val(),
    types: ['(regions)', '(cities)'],
    componentRestrictions: {
      country: 'us'
    }
  }, _this.callback);
});

this.callback = function(predictions, status) {
  var i, prediction, _results;
  console.log(predictions);
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    alert(status);
    return;
  }
  i = 0;
  prediction = void 0;
  this.results = $('ul.location_results').removeClass('hidden').html('');
  _results = [];
  while (prediction = predictions[i]) {
    this.results.append("<li><span class='location-address'>" + prediction.terms[0].value + "</span><span class='location-state'>" + prediction.terms[prediction.terms.length - 2].value + "</span></li>");
    _results.push(i++);
  }
  return _results;
};

最佳答案

根据API 'In general only a single type is allowed'。

如果要尝试分别获取两种类型，则可以使用deferred object来管理该过程，如下所示:

// set a new promises array, set the types array
var promises = [], types = ['(regions)', '(cities)'];

// loop over the types and push the output of getPredications() for each one
// into the promises array
for (var i = 0, l = types.length; i < l; i++) {
  promises.push(getPredictions(types[i]));
}

// when all promises have completed then do something
// This uses jQuery's when method which can take an array of
// promises when used with apply
$.when.apply(null, promises).then(runThisFunction);

function getPredictions(type) {

  // Set up a new deferred object
  var deferred = new $.Deferred();

  // Call the asynchronous function to get the place predictions
  this.service.getPlacePredictions({
    input: _this.input.val(),
    types: type,
    componentRestrictions: {
      country: 'us'
    }
  }, function (data) {

    // Once the data has been returned perhaps do something with data
    // but definitely resolve the deferred object.
    deferred.resolve();
  });

  // return the promise
  return deferred.promise();
}