Uncaught SyntaxError: Unexpected token: 当试图解析 JSON 请求时

Question

我正在尝试通过 JSON url 请求从谷歌地图距离矩阵 api 获取数据，解析数据并将其放入输入字段以输入我的 mysql 数据库。我能够完成请求，并且 JSON 数据显示在我的 Chrome 控制台中，但我收到“未捕获的语法错误：意外的令牌：”，并且输入字段中没有任何内容。

这是我的代码：

$("button").click(function(){
 $.ajax({
  url: "https://maps.googleapis.com/maps/api/distancematrix/json",
  type: "GET",
    dataType: 'jsonp',
        cache: false,
  data: {
    units: "metric",
    origins: $("#autocomplete").val(),
    destinations: $("#fullAddress").val(),
    key: "mykey"
        },
  success: function(data) {
    var json = JSON.parse(data);
    var distance = json[distance.value];
      $('#distance').val(data);
  }
 });
});

Answer 1

错误：Uncaught SyntaxError: Unexpected token : 表示 API 不支持 JSONP。

如果我将JSONP 更改为JSON，我会得到一个不同的错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access.

Google 的网络服务旨在通过服务器使用。如果您想从客户端的 javascript 访问它们，请使用 Google Maps Javascript API v3 Distance Matrix Service

example in documentation

proof of concept fiddle

代码 sn-p：

function initialize() {
  var service = new google.maps.DistanceMatrixService();
  $("#button").click(function() {
    service.getDistanceMatrix({
      origins: [$("#autocomplete").val()],
      destinations: [$("#fullAddress").val()],
      travelMode: 'DRIVING',
      unitSystem: google.maps.UnitSystem.METRIC,
      avoidHighways: false,
      avoidTolls: false
    }, function(response, status) {
      if (status !== 'OK') {
        alert('Error was: ' + status);
      } else {
        var originList = response.originAddresses;
        var destinationList = response.destinationAddresses;
        var outputDiv = document.getElementById('output');
        for (var i = 0; i < originList.length; i++) {
          var results = response.rows[i].elements;
          for (var j = 0; j < results.length; j++) {
            outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
              ': ' + results[j].distance.text + ' in ' +
              results[j].duration.text + '<br>';
          }
        }

        var distance = response.rows[0].elements[0].distance.text;
        $('#distance').val(distance);
      }
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="button" type="button" value="click" />
<input id="autocomplete" value="New York, NY" />
<input id="fullAddress" value="Newark, NJ" />
<div id="output"></div>
<input id="distance" />