从google places autocompleteService.getPlacePredictions返回多种类型

时间:2014-01-15 14:13:05

标签: javascript jquery google-maps google-maps-api-3

我正在尝试为Google地方自动填充实施自定义用户界面,因为预建的用户不允许我手动选择结果。当getPlacePredictions函数选项中没有使用多个类型时,一切正常,但当我使用['(regions)','(cities)']时,状态返回'invalid request'

我做错了什么或者不能返回多种类型?

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;
};

1 个答案:

答案 0 :(得分:5)

根据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();
}