Angular to Google Maps APIでAJAXリクエストを作成できないのはなぜですか

Question

私のフォームのZipcodeフィールドをAngularで検証しようとしています。標準のDirectionsService.route（）では不可能であることが証明されています$ httpリクエストを作成しようとしています。 メソッドを指定しないと、CORSエラーが発生します。メソッドをJSONPに設定すると、それはうまくいきますが、私のthen（）関数には当てはまりません。私はちょうど解析エラーを取得します。私はドキュメントのように、私のURLにコールバックを追加しようとしましたが、それを修正するために何もしませんでした。

私はこの方法を使用できない場合、Directions 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); 
      }); 

これを変更して適切なリクエストを行うことはできません。しかし、それらが表示され続けることが可能でなければなりませんexamples with URLsだけでなく、directionsService、角度でカスタム検証のために動作しません。

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

Answer 1

私はMapquest APIに切り替えて問題を解決しました。 Googleマップのエンドポイントで何が問題になっているかは完全にはわかりません。しかし、MapquestはAJAXのリクエストを簡単にAngularで行うことができました。

Answer 2

あなたが戻ってくる方向であなたが何をしているのか分かりませんが、routeのoverview_pathのすべてのノードをリストする簡単なアプリをセットアップできました。

1つの点は、<script async defer src="...">ではなく、Maps APIを同期して読み込むことです。私はサービスを利用し始めることができるときはいつでも解決すると思われるサービス工場を作らなければならないのは奇妙なことだと思います。あなたはそれをすることができます、ちょっと変です。

(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>