发送 AJAX 请求以获取 Google 地图的方向时出错（访问标头）

Question

我正在尝试使用 Google 地图的路线 API 来获取路线，但出现错误：

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 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',
    method: 'GET',
    success: function(directionsResults){
        console.log(directionsResults);
                            }
                                            });

Answer 1

在启用方向 API 并阅读文档 (https://developers.google.com/maps/documentation/javascript/directions) 后，您可以执行类似的操作。这会将地图中心设置在芝加哥，并提供从芝加哥到波士顿的路线。

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