Angular.js googleMap API json Uncaught SyntaxError:意外的令牌:

时间:2017-02-04 22:25:51

标签: angularjs json google-maps callback jsonp

我以前的所有帖子都是红色的: *我添加了:& callback = JSON_CALLBACK *我也试过简单的$ http.get但它导致:' Access-Control-Allow-Origin ' *我还试图从回调中将jsonpCallbackParam定义为' json_callback '并添加格式:'jsonp' *还尝试阅读有关$ sce.trustAsResourceUrl(url)的文档(我不太了解:-( 在F12 - >来源,我看到返回了所需的数据,但在控制台日志中我得到了Uncaught SyntaxError:Unexpected token。

请告知

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); 
});

1 个答案:

答案 0 :(得分:1)

端点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>
&#13;
&#13;
&#13;