Ionic 3/Google Distance Matrix API

Question

我试图执行的基本思想是： 我有一个分支列表，每个分支都有纬度、lng 属性，其中包含纬度和经度。我想使用 Google 距离矩阵 API 来查找它们中每个人的距离和持续时间。

这是我的代码。

Branches.ts(显示所有分支的页面，我还想在其中显示距离和持续时间)

//other imports
import { TravelDetailsProvider } from '../../providers/travel-details/travel-details';
@IonicPage()
@Component({
selector: 'page-branches',
templateUrl: 'branches.html',
})
export class BranchesPage {
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public branchProvider: BranchProvider,
public travelProvider: TravelDetailsProvider
){
}
ionViewDidLoad() {
this.getBranches();
}
getBranchDistanceAndTime(){
for(let branch of this.allBranches){
this.travelProvider.getTravelDetails(branch);
}
}
}

我知道我可能应该将返回的值分配给我的 branches.ts 上的变量并在视图上迭代它们，但由于某种原因我无法从getTravelDetails()方法返回值

旅行详情.ts

declare var google;
var service = new google.maps.DistanceMatrixService();
@Injectable()
export class TravelDetailsProvider {
private travelDetailsObject: any = {};
constructor(public http: HttpClient) {
}
getTravelDetails(branch){
service.getDistanceMatrix(
{
origins: [new google.maps.LatLng(6.870128,79.880340)],
destinations: [new google.maps.LatLng(branch.lat, branch.lng)],
travelMode: 'DRIVING'
}, this.callback);
}
callback(response, status) {
let travelDetailsObject;
if (status == 'OK') {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
var element = results[j];
var distance = element.distance.text;
var duration = element.duration.text;
var from = origins[i];
var to = destinations[j];
travelDetailsObject = {
distance: distance,
duration: duration
}
}
}
this.travelDetailsObject = travelDetailsObject;
}
}
}

当我运行此代码时，出现错误：Uncaught TypeError: Cannot set property 'travelDetailsObject' of null

在做了一些研究之后，我遇到了这个github问题页面。我想知道这是否是我遇到的问题 https://github.com/rollbar/rollbar.js/issues/344

感谢您的任何帮助

Answer 1

你可以试试

constructor() {
this._mx = new google.maps.DistanceMatrixService();
}
getDistanceMatrix(req: DistanceMatrixRequest): Observable<DistanceMatrixResponse> {
return Observable.create((observer) => {
this._mx.getDistanceMatrix(req, (rsp, status) => {
// status checking goes here
observer.next(rsp);
observer.complete();
});
});
}