在 Angular 服务中获取与谷歌地图 API 的距离？答案

【问题标题】：Get distance from google maps API in Angular service?在 Angular 服务中获取与谷歌地图 API 的距离？
【发布时间】：2018-02-23 05:22:21
【问题描述】：

我正在尝试运行 JS 版本的 google maps API，因为常规 API 给了我一个 CORS 问题。我试图找到两个目的地之间的距离和时间。如何从我创建的服务中取回数据？

我的服务看起来像这样。

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class GMapsService {

  constructor(private http: Http) { }

  getData() {
    return //the data back.
  }
}

https://jsfiddle.net/65nuyn4b 这个 jsfiddle 链接显示了如何完成它。但这只是普通的 JS，我需要从服务中运行它，所以我很困惑如何包含链接中显示的脚本标签，以及它将如何将所有内容返回到我将订阅的任何组件这个功能。我错过了什么吗？我是 Angular 的新手。

【问题讨论】：

上面的代码没有满足任何人重现您遇到的问题的最低要求。 Have a look at this link please。接下来让我们把问题分解成更小的块；您遇到了 CORS 问题，那么您现在如何调用 API？

标签： angular google-maps google-maps-api-3 angular-services

【解决方案1】：

如果您的 getData() 函数返回 Observable 数据，例如 return this.http.get("some url"); 然后你可以在另一个组件中取回数据：

import {GMapsService} from './serviceFileName';
export class YourComponent {
// inject your service
constructor(private myService: GMapsService) {

}

aFunction() {
this.myService.getData().subscribe((data: any) => {
  //process the returned data;
}, err => {
  console.error('GMapsService getData() fail');
});

}

【讨论】：