Question

我需要一些指导。我正在使用Angular2，我只是想使用谷歌地图API（距离矩阵API）来计算两点之间的距离。

我首先测试了浏览器中的链接（抱歉没有附加google Maps API密钥）： https://maps.googleapis.com/maps/api/distancematrix/json?origins=ABADI%C3%91O&destinations=Barcelona&key=YourGoogleMapsAPIKey

这个链接没有问题，我收到以下内容：

{
   "destination_addresses" : [ "Barcelona, Barcelona, España" ],
   "origin_addresses" : [ "48220 Abadiño, Vizcaya, España" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "617 km",
                  "value" : 617099
               },
               "duration" : {
                  "text" : "5h 42 min",
                  "value" : 20512
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status"

到目前为止一切顺利。好吧，我认为使用Angular2非常简单，只需使用http.get然后转换json的答案。好吧，要么我犯了一个我无法找到的愚蠢错误，要么就是不容易。当我向Google Maps API发送相应的请求时，我总是从Angular 2中收到以下错误：

BrowserDomAdapter</BrowserDomAdapter.prototype.logError() angular2.dev.js:25644
BrowserDomAdapter</BrowserDomAdapter.prototype.logGroup() angular2.dev.js:25655
ExceptionHandler</ExceptionHandler.prototype.call() angular2.dev.js:4863
ApplicationRef_/<() angular2.dev.js:8167
EventEmitter</EventEmitter.prototype.subscribe/schedulerFn<() angular2.dev.js:7865
SafeSubscriber</SafeSubscriber.prototype.__tryOrUnsub() rx.js:10775
SafeSubscriber</SafeSubscriber.prototype.next() rx.js:10730
Subscriber</Subscriber.prototype._next() rx.js:10690
Subscriber</Subscriber.prototype.next() rx.js:10667
Subject</Subject.prototype._finalNext() rx.js:11191
Subject</Subject.prototype._next() rx.js:11183
Subject</Subject.prototype.next() rx.js:11142
EventEmitter</EventEmitter.prototype.emit() angular2.dev.js:7846
NgZone/this._zoneImpl<.onError() angular2.dev.js:8359
NgZoneImpl/this.inner<.onHandleError() angular2.dev.js:2206
Zone</ZoneDelegate</ZoneDelegate.prototype.handleError() angular2-polyfills.js:353
Zone</Zone</Zone.prototype.runTask() angular2-polyfills.js:285
ZoneTask/this.invoke()

我正在使用的功能是：

  getResponse(url: string) {

        var headers = new Headers();
        headers.append('Accept-Encoding','gzip');

        var requestOptions = new RequestOptions({
            method: RequestMethod.Get,
            url: url,
            headers: headers
        });

        return this.http.get(url)
            .do(data => this._logger.debug(data, "Get -> Raw reponse: "))
            .map(res => <Event[]>res.json())
            .do(data => this._logger.debug(data, "Get -> After json parsing: "))  // eyeball results in the console
            .catch(this._logger.handleResponseError);

    }

现在我的问题是：

你能给我一些建议吗？
你们中的任何人都知道会发生什么吗？我尝试使用XMLHttpRequest，但是，Angular2似乎并不像它那样＆＃34;。

Answer 1

您尝试通过AJAX执行Web服务请求，并且显然存在与同源策略相关的问题。

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Distance Matrix API在响应中不包含CORS标头，因此您无法通过AJAX请求检索数据。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

解决方案：使用Maps JavaScript API距离矩阵服务，而不是通过AJAX的Web服务请求。

https://developers.google.com/maps/documentation/javascript/distancematrix

无法将Google Maps API与Angular 2（http.get）一起使用

1 个答案: