Angular.js GoogleMap API JSON Uncaught SyntaxError: Неожиданный маркер:

Question

Я красен все предыдущие сообщения: * я добавил: & обратный вызов = JSON_CALLBACK * я также попытался просто $ http.get, но это приводит к следующему: "Access -контроль-Allow-Origin ' * я также пытался определить jsonpCallbackParam к' json_callback 'от только обратного вызова и добавил формат : '' JSONP * также попытался прочитать документацию о $ sce.trustAsResourceUrl (URL) (ну я не очень понял :-( В F12 -> source я вижу, что требуемые данные возвращаются, но в журнале консоли я получаю Uncaught SyntaxError: Неожиданный токен.

пожалуйста посоветуйте

var autoJsonpUrl = 'https://maps.googleapis.com/maps/api/distancematrix/json?region=il&origins=tel-aviv&destinations=jerusalem&key=AIzaSyD3xhn92KwStkZAg-rZueAFI1LooRLpND0' + '&callback=JSON_CALLBACK'; 

var options = 
{ 
    jsonpCallbackParam: 'json_callback', 
    cache: false 
}; 

$http.jsonp(autoJsonpUrl, options).then(function (response) { 
    console.log(response); 
}); 

Answer 1

Endpoint http://maps.googleapis.com/maps/api/distancematrix/ не поддерживает JSONP, вместо того, чтобы вы могли бы рассмотреть возможность использовать Google Maps JavaScript API, как показано ниже:

angular.module('mapApp', []) 
 

 
    .controller("mapCtrl", function ($scope, $http) { 
 
     $scope.routeInfo = null; 
 
     var distanceMatrix = new google.maps.DistanceMatrixService(); 
 
     var distanceRequest = { region: "il", origins: ["tel-aviv"], destinations: ["jerusalem"], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC}; 
 
     distanceMatrix.getDistanceMatrix(distanceRequest, function (response, status) { 
 
      if (status != google.maps.DistanceMatrixStatus.OK) { 
 
       console.log('An error occured: ' + status); 
 
      } 
 
      else { 
 
       $scope.$apply(function(){ 
 
        $scope.routeInfo = response;  
 
       }); 
 
       
 
      } 
 
     }); 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
 
<script src="https://maps.google.com/maps/api/js"></script> 
 
<script src="app.js"></script> 
 

 
<div ng-app="mapApp" ng-controller="mapCtrl"> 
 
    <pre>{{routeInfo | json}}</pre> 
 
</div>