为什么我不能在Angular中向Google Maps API发出AJAX请求?

Why can't I make an AJAX request in Angular to Google Maps API

本文关键字：发出 API AJAX 请求 Maps Google 不能 Angular 中向 为什么      更新时间：2023-09-26

我试图在Angular中验证我的表单中的zipcode字段，事实证明，使用标准DirectionsService.route()是不可能的，所以我试图进行$http请求。如果不指定方法，就会得到CORS错误。如果我将方法设置为JSONP，它可以正常运行，但它不会命中then()函数。我得到一个解析错误。我试过添加一个回调，如文档建议，到我的URL，没有做任何修复它。

如果我不能使用这个方法，为什么方向API在他们的文档中提供了这么多示例url，比如"https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=YOUR_API_KEY"?

var url = 'https://maps.googleapis.com/maps/api/directions/json?origin=53703&destination=54481&key=AIzaSyBXbK2tp2WmjBsnwS8QNiqH7QMKxMIZ86A&callback=JSON_CALLBACK';
            $http({method:'get', url: url}).then(function(response){
                var data = JSON.parse(angular.fromJson(response.data));
                console.log(data);
            });

我没有办法改变这个来做出一个合适的请求。但是，如果他们继续展示带有url的示例，而不仅仅是directionsService，那么这一定是可能的，因为directionsService在Angular中无法用于自定义验证。

directionsService.route({
        origin: '53075',
        destination: '"'+zip+'"',
        travelMode: 'DRIVING'
    }, this.getDistanceCallback);

我通过切换到Mapquest API解决了我的问题。不完全确定谷歌地图端点的问题是什么。但Mapquest让我在Angular中轻松地完成AJAX请求

我不知道你在做什么你回来的方向，但我能够建立一个简单的应用程序，将列出route的overview_path的所有节点。

一个痛点是你将同步加载Maps API，而不是使用<script async defer src="...">。我认为必须创建一个服务工厂有点奇怪，我猜它会在你开始使用服务时解决问题。你可以这么做，只是有点奇怪。

(function() {
  "use strict";
  var mapApp = angular.module("map-app", []);
  mapApp.service("MapSrvc", function($q) {
    var directionsService = new google.maps.DirectionsService;
    this.getDirections = function(start, end, mode) {
      mode = mode || "DRIVING";
      var deferred = $q.defer();
      directionsService.route({
        origin: start.toString(),
        destination: end.toString(),
        travelMode: mode
      }, function(response, status) {
        if (status === "OK") {
          deferred.resolve(response);
        } else {
          deferred.reject("Something went wrong");
        }
      });
      return deferred.promise;
    };
  });
  mapApp.controller("MapCtrl", function($scope, MapSrvc) {
    $scope.start = 53075;
    $scope.end = 54481;
    $scope.mode = "DRIVING";
    $scope.modes = [{
      name: "Driving",
      mode: "DRIVING"
    }, {
      name: "Walking",
      mode: "WALKING"
    }, {
      name: "Transit",
      mode: "TRANSIT"
    }];
    $scope.directions = [];
    $scope.submitHandler = function() {
      MapSrvc.getDirections($scope.start, $scope.end, $scope.mode).then(function(directions) {
        $scope.directions = directions.routes[0].overview_path.map(function(latlng) {
          return {
            lat: latlng.lat(),
            lng: latlng.lng()
          }
        });
      });
      return false;
    }
  });
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXbK2tp2WmjBsnwS8QNiqH7QMKxMIZ86A"></script>
<main ng-app="map-app">
  <h1>Mapper</h1>
  <div ng-controller="MapCtrl">
    <section>
      <h2>Where do you want to go?</h2>
      <form name="mapper" ng-submit="submitHandler()">
        <fieldset>
          <legend>Travel Parameters</legend>
          <ul>
            <li>
              <label for="start">Start</label>
              <input id="start" type="text" ng-model="start">
            </li>
            <li>
              <label for="end">End</label>
              <input id="end" type="text" ng-model="end">
            </li>
            <li>
              <select ng-model="mode" ng-options="mode.mode as mode.name for mode in modes"></select>
            </li>
            <li>
              <input type="submit">
            </li>
          </ul>
        </fieldset>
      </form>
    </section>
    <section>
      <h2>Directions</h2>
      <ul>
        <li ng-repeat="direction in directions track by $index">{{direction.lat}}, {{direction.lng}}</li>
      </ul>
    </section>
  </div>
</main>

相关文章：