为什么我不能在Angular中向Google Maps API发出AJAX请求?
Why can't I make an AJAX request in Angular to Google Maps API
我试图在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>
- 向Yahoo Finance API发出JSONP请求时获得400错误请求
- 解决向api.twitter.com发出XMLHttpRequest的方法
- 当鼠标光标纬度等于标记纬度时,发出警报(Google Maps API v3)
- 如何添加api令牌作为我向api发出的每个HTTP请求的用户名
- 通过Node请求向uClassify API发出请求
- 向 Google 日历 API 发出服务器到服务器的请求
- 如何向 Google API 发出经过认证的 RESTful oAuth 2 后端请求
- Node Js :是否可以从节点 js 服务器向某些 API 发出 1000 http get 请求
- $http提供商向 Github API 发出外部请求,但不向 Google 地图 API 发出请求
- 如何向需要身份验证的 API 发出 Javascript JSON 请求
- 向谷歌日历 API 发出 ajax 请求
- 在每秒 10 次调用限制的情况下一次发出 50 个 API 请求的有效方法是什么(烂番茄 API)
- 使用node.js向Google API发出http请求
- 从客户端发出instagram API请求是否安全
- 向一个API发出多个请求,该API每分钟只能处理20个请求
- 保存表单中的信息并发出api get请求
- Google Places Javascript API不发出某些请求
- 如何向外部API发出GET和POST请求
- 脚本自己发出错误的请求(JS - TheMovieDb api)
- 为什么我不能使用 JavaScript 发出 API 请求