Uncaught SyntaxError: неожиданный токен: при попытке проанализировать запрос JSON

Я пытаюсь получить данные из api матрицы расстояний карт Google через запрос URL-адреса JSON, проанализировать данные и поместить их в поле ввода для ввода в мою базу данных mysql. Я могу выполнить запрос, и данные JSON отображаются в моей консоли Chrome, но я получаю сообщение «Uncaught SyntaxError: Unexpected token:», и в поле ввода ничего не помещается.

Это мой код:

$("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);
  }
 });
});

jquery json google-maps

02.05.2018 03:33

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

106

Ответы 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

пример в документации

доказательство концепции скрипки

screenshot of result

фрагмент кода:

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

Привет, я попытался собрать его в файл, но получаю «Uncaught ReferenceError: google не определен в test.php: 48», строка 48: google.maps.event.addDomListener (window, «load», initialize); пожалуйста помоги

— 02.05.2018 10:10

02.05.2018 05:05