"SyntaxError: Unexpected token ':'. Parse error." JSON & ajax

Question

我正在尝试将 google 地图 api 与距离矩阵 api 一起使用，我正在获取 json 格式的路线以及距离和时间。

link 我从中获取数据的示例：

https://maps.googleapis.com/maps/api/distancematrix/json?origins=place_id:ChIJ7-bxRDmr3oARawtVV_lGLtw&destinations=place_id:ChIJyYB_SZVU2YARR-I1Jjf08F0&key=YOUR_API_KEY&units=imperial

查看数据如下：

{
   "destination_addresses" : [ "2920 Zoo Dr, San Diego, CA 92101, USA" ],
   "origin_addresses" : [
      "San Diego International Airport (SAN), 3225 N Harbor Dr, San Diego, CA 92101, USA"
   ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "5.2 mi",
                  "value" : 8440
               },
               "duration" : {
                  "text" : "13 mins",
                  "value" : 756
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

我在单击按钮 (ajax) 时调用 jquery 函数，如下所示：

$.ajax({
        type: 'GET',
        url: 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=place_id:' + me.originPlaceId + "&destinations=place_id:" + me.destinationPlaceId + "&key=YOUR_API_KEY&units=imperial",
        dataType: "JSONP", // data type expected from server
        accepts: 'application/json',
        success: function(data) {
          console.log(data);
        },
        error: function(error) {
          console.log('Error: ' + error);
        }
});

此代码是许多其他帖子的结果，但我仍然遇到错误：

SyntaxError: Unexpected token ':'. Parse error.

在 json 数据的第 2 行。这个错误发生在 safari 浏览器上，如果我运行 chrome 上的代码我得到以下错误：

jquery-3.4.1.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://maps.googleapis.com/maps/api/distancematrix/json?origins=place_id:ChIJ7-bxRDmr3oARawtVV_lGLtw&destinations=place_id:ChIJyYB_SZVU2YARR-I1Jjf08F0&key=AYOUR_API_KEY&units=imperial&callback=jQuery34106919863879807548_1566930061936&_=1566930061937 with MIME type application/json.

我需要帮助解决这些错误，提前谢谢你。

Answer 1

由于您在 客户端 （前端）创建 Distance Matrix API web service request，这就是您收到跨源阻止错误 (CORB) 的原因。 Web 服务请求应在 服务器端 .

执行

请注意，如果您打算在客户端使用距离矩阵，JavaScript API 有一个距离矩阵服务（可防止 CORB 问题）。请参考本指南：https://developers.google.com/maps/documentation/javascript/distancematrix

希望对您有所帮助！

"SyntaxError: Unexpected token ':'. Parse error." JSON & ajax

"SyntaxError: Unexpected token ':'. Parse error." JSON & ajax

javascript

ajax

jquery

json

google-distancematrix-api