GoogleMapsAPI的JSON“未捕获的SyntaxError：意外的令牌：”

Question

我正在学习AngularJS。 我正在尝试以JSON响应格式获取GoogleMapsAPI。 但Chrome报告“未捕获的SyntaxError：意外令牌：”。

到目前为止，我只是尝试使用以下代码连接并查看对象信息：

var deferred = $q.defer();

    $http.jsonp('https://maps.googleapis.com/maps/api/distancematrix/json?origins=Tokyo&destinations=Kyoto&mode=Driving&sensor=false', {
        params: {
            callback: 'JSON_CALLBACK'
        }
    }).success(function(response){
        console.dir(data,status,headers,config);
        deferred.resolve(data);   
    }).error(function(data,status,headers,config){
        deferred.reject(status);
    });

    return deferred.promise;

响应中返回了JSON，但是Chrome报告“未捕获的SyntaxError：意外的令牌：”，我在控制台中不断收到以下错误：

Uncaught SyntaxError: Unexpected token : (18:20:02:095 | error, javascript)
  at https://maps.googleapis.com/maps/api/distancematrix/json?origins=Tokyo&destinations=Kyoto&mode=Driving&sensor=false&callback=angular.callbacks._0:2

GoogleMapsApi的JSON响应：

    {
   "destination_addresses" : [ "Kyoto, Kyoto Prefecture, Japan" ],
   "origin_addresses" : [ "Tokyo, Japan" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "457 km",
                  "value" : 456931
               },
               "duration" : {
                  "text" : "5 hours 39 mins",
                  "value" : 20338
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

如果我直接导​​航到url本身，则返回JSON并显示在浏览器中。

有什么主意为什么我无法收到此错误并且我从未将其传递给成功回调吗？

Answer 1

看起来Google的Distance Matrix API返回JSON，而不是JSONP。

JSON和JSONP有什么区别？

也许尝试普通的$http.get()调用； Angular将自动解析JSON响应：

var promise = $http.get('https://maps.googleapis.com/maps/api/distancematrix/json?origins=Tokyo&destinations=Kyoto&mode=Driving&sensor=false')
    .then(function(response){
        var data = response.data,
            status = response.status,
            headers = response.headers,
            config = response.config;
        console.dir(data,status,headers,config);
        return data; 
    }, function(response){
        var status = response.status;
        return status;
    });

return promise;