Question

我正在构建一个查询Google Maps Places Autocomplete API并返回一组对象的服务。服务本身非常简单。我正在使用Maps JS API。字符串将传递给服务，并返回匹配列表。

问题是如何将此服务输出转换为Angular Observable？

这就是我现在的位置：

import {Injectable, OnInit} from '@angular/core';
import {Observable} from 'rxjs/Rx';
declare var google: any;

@Injectable()
export class GoogleMapsService {

    getAutocomplete(input = {'input': '', 'types': [] } ) {
        var autocomplete = new google.maps.places.AutocompleteService();
        return autocomplete.getPlacePredictions({ input: input.input });
    }
}

但这不是一个Observable，我不能.subscribe。

Answer 1

文档说autocomplete.getPlacePredictions有两个参数：请求和回调函数。所以你可以这样做：

Observable.create(obs => {
  let displaySuggestions = function (predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      obs.error(status);
    }
    else {
      obs.next(predictions);
      obs.complete();
    }
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({input: 'test'}, displaySuggestions);
});

Answer 2

getQueryPredictions查看the example in the docs：

var service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);

它希望最后一个参数是一个接收结果的回调。 getPlacePredictions大概是相同的。这表明您可以使用Observable.bindCallback，如下所示：

return Observable.bindCallback(autocomplete.getPlacePredictions)({ input: input.input });

注意bindCallback返回一个函数，该函数使用与包装函数相同的参数，减去回调。

如何构建一个返回Observable的服务？

2 个答案: