Google距离矩阵API

Question

我正在尝试获取 direction_in_traffic，但使用常规方向 api 无法返回。我发现 distancematrix api 中有一个字段可以做到这一点。

当我从我自己的机器上运行时，此代码有效，但是一旦它在线，我看到有关 Access-Control-Allow-Origin

的错误

var durationInTraffic = function(from, to, mode, callback) {
  var key = 'API-KEY';
  var address = 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=' + from + '&destinations=' + to + '&key='+ key +'&travelmode=' + mode + '&departure_time=now';
  var req = new XMLHttpRequest();
  req.addEventListener('load', function(){
    if (typeof callback === 'function') {
      callback(JSON.parse(this.responseText).rows[0].elements[0].duration_in_traffic.value);
    }
  });

  req.open('GET',address);
  req.setRequestHeader('Access-Control-Allow-Origin','https://haroen.me');
  req.setRequestHeader('Access-Control-Allow-Headers','X-Requested-With');
  req.send();
};

我已经创建了密钥，但是在 domain verification 选项卡上似乎 "forget" 我输入了什么地址。

jsbin（这显然是行不通的，因为该密钥在该域上是不允许的，但我在自己的域上遇到了同样的错误）。

我正在尝试的完整代码可以在 https://github.com/haroenv/maps-checker

中看到

感谢您的帮助！

Answer 1

正如@dandavis 在评论中所建议的那样，这不起作用的原因是 Google 希望此响应是服务器端的。我的解决方法如下：将请求镜像到 Google 的 php（或任何服务器端解决方案）。一个示例实现是这样的：

<?php
echo file_get_contents('https://maps.googleapis.com/maps/api/distancematrix/json?origins=' . urlencode($_POST['from']) . '&destinations=' . urlencode($_POST['to']) . '&key='. urlencode(json_decode(file_get_contents('config.json'), true)['maps-key']) .'&mode=' . urlencode($_POST['mode']) . '&departure_time=now');
?>

然后我从我的主客户端脚本中向该脚本发送请求。

Google距离矩阵API

Google DistanceMatrix API

javascript

google-distancematrix-api