我正在尝试为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;
};
答案 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();
}