发送AJAX请求以获取Google地图的路线时发生错误（访问标头） [英] Error ( Access headers ) when sending AJAX request to get Google Maps' directions

问题描述

我尝试使用Google Maps的API API来获取路线，并收到错误消息：

否'Access-Control- Allow-Origin'标题出现在请求的资源上。原因' http://irfanknow.com '因此不被允许访问。

我试过使用https是协议和jsonp作为数据类型，但都没有解决它。

这是我的代码：

  $ .ajax（{
 url：'https://maps.googleapis.com/maps/api/directions/json?origin='+encodeURI(from)+'&destination='+encodeURI(to） +'& key = AIzaSyA-DmsaUVTWZgzqd43J5lMWIgUcIiIfIlo'，
 dataType：'json'，
 jsonp：'callback'，
方法：'GET'，
 success：function（directionsResults ）{
 console.log（directionsResults）; 
} 
}）; 
  

解决方案

启用路线API并阅读文档（< href =https://developers.google.com/maps/documentation/javascript/directions =nofollow> https://developers.google.com/maps/documentation/javascript/directions ）人们可以做这样的事情。这在芝加哥设置地图中心，并指示从芝加哥到波士顿。

var directionsService = new google.maps.DirectionsService（）;
var map;

函数initialize（）{
directionsDisplay = new google.maps.DirectionsRenderer（）;
var chicago = new google.maps.LatLng（41.850033，-87.6500523）;
var mapOptions = {
zoom：7，
center：chicago
}
map = new google.maps.Map（document.getElementById（map-canvas ），mapOptions）;
directionsDisplay.setMap（map）;
}

函数calcRoute（）{
var start ='Chicago';
var end ='波士顿';
var request = {
origin：start，
destination：end，
travelMode：google.maps.TravelMode.DRIVING
};
directionsService.route（request，function（result，status）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（result）;
}
}）;
}

I'm trying to use the directions API of Google Maps to get directions and I'm getting an error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://irfanknow.com' is therefore not allowed access.

I've tried using https are the protocol and jsonp as the data type, but neither seem to fix it. What am I doing wrong?

Here is my code:

$.ajax({
    url: 'https://maps.googleapis.com/maps/api/directions/json?origin='+encodeURI(from)+'&destination='+encodeURI(to)+'&key=AIzaSyA-DmsaUVTWZgzqd43J5lMWIgUcIiIfIlo',
    dataType: 'json',
    jsonp: 'callback',
    method: 'GET',
    success: function(directionsResults){
        console.log(directionsResults);
                            }
                                            });

解决方案

After enabling the directions API and reading the documentation ( https://developers.google.com/maps/documentation/javascript/directions ) one can do something like this. This sets the map centre in chicago and gives directions from chicago to boston.

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
      zoom:7,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
  var start = 'Chicago';
  var end = 'Boston';
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
  };
      directionsService.route(request, function(result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(result);
          }
      });
}

这篇关于发送AJAX请求以获取Google地图的路线时发生错误（访问标头）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！