Google Maps 的 Roads API 不适用于 XHR

Posted 2023-04-14

【中文标题】Google Maps 的 Roads API 不适用于 XHR

【英文标题】：Google Maps' Roads API not working with XHR

【发布时间】：2016-03-21 14:21:51

【问题描述】：

我需要将折线捕捉到道路上，我找到了example from google that works really well。我稍微调整了一下，然后我从 javascript 中得到一个 NetworkError，说响应标头没有“Access-Control-Allow-Origin”标头。如果我从 XHR 中检查 responseText，它会给我 the standard Google 404 page。

问题是，如果 Roads API 不允许跨域请求，我应该如何使用它？

代码：

getSnappedPoints: function (path)  //path is an array of latlng
    var xhr = new XMLHttpRequest();
    var snappedCoords = new Array();
    var pathValues = new Array();
    for (var i = 0; i < path.getLength(); i++)
        pathValues.push(path.getAt(i).toUrlValue());

    console.log(pathValues.join("|"));
    xhr.open("GET", "https://roads.googleapis.com/v1/snapToRoads?interpolate=true&path=" + pathValues.join("|") + "&key=MY_API_KEY", false);
    xhr.send();
    for (var i = 0; i < JSON.parse(xhr.responseText).snappedPoints.length; i++)
        snappedCoords.push(new google.maps.LatLng(JSON.parse(xhr.responseText).snappedPoints[i].location.latitude, JSON.parse(xhr.responseText).snappedPoints[i].location.longitude));
    return snappedCoords;

（“MY_API_KEY”只是在那里，因为我不希望任何人使用我的配额，我已将其替换为我的浏览器密钥。）

【参考方案1】：

它适用于documentation，即https:，如果我尝试使用http: 或http: 使用https 从https 上的jsfiddle 访问Web 服务，我会收到您报告的错误。它仅在您通过 https: 访问 API 时才有效，前提是您的页面是安全的（运行在 https: 上），如果您的页面运行在 http: 上，请使用 http: 访问 API。