谷歌距离矩阵 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();
};

我已经创建了密钥，但是在 域验证 标签中，它似乎“忘记”了我输入的地址。

jsbin（显然不起作用，因为该密钥不被允许在该域上使用，但我在自己的域上也遇到了同样的错误）。

我正在尝试使用完整代码可见于https://github.com/haroenv/maps-checker

谢谢您的帮助！

- Haroen Viaene

---

如果您的API密钥与您的实际Google开发帐户相关联，可能需要隐藏它。 - Vlad

@dandavis 那么从客户端使用距离矩阵 API 是不可能的吗？我尝试过 setRequestHeader，但实际上并没有改变任何东西，这让我相信错误出在其他地方。 - Haroen Viaene

@dandavis你的意思是什么？是创建一个服务器端API，将每个请求“镜像”到Google吗？ - Haroen Viaene

是的，你可以通过Ajax与PHP服务器通信，然后PHP再请求第三方API。这样就可以隐藏密钥、绕过CORS、缓存、验证等操作。 - dandavis

啊，那很糟糕，但感谢您的帮助！如果您能将此写成答案，我会接受它 @dandavis - Haroen Viaene

Answer 1

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

<?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');
?>

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

- Haroen Viaene