“语法错误：意外的标记 ':'。解析错误。” JSON 和 ajax

Question

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

我从以下链接获取数据的示例：

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

和数据查看如下：

{
   "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

由于您在客户端（前端）发出距离矩阵 API Web 服务请求，这就是您收到跨源阻塞错误 (CORB) 的原因。 Web 服务请求旨在在服务器端执行。

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

希望这可以帮助！