“語法錯誤：意外的標記 ':'。解析錯誤。” 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

希望這可以幫助！