从 JavaScript 获取，解析 XML 的问题？还是 Maps API 错误？答案

【问题标题】：GET from JavaScript, problems parsing XML? Or Maps API errors?从 JavaScript 获取，解析 XML 的问题？还是 Maps API 错误？
【发布时间】：2018-03-02 02:02:11
【问题描述】：

我正在尝试从 Javascript 获取 HTTP，调用 Google 地图以获取从 A 到 B 的传输持续时间，然后按如下方式解析生成的 XML：

function getTransitTime(match) {
    var homeBase = '<Address 1>';
    var distURL = 'https://maps.googleapis.com/maps/api/distancematrix/json?units=metric&key=API_KEY_I_GOT&mode=transit&arrival_time=1519977600&origins=' + homeBase + '&destinations=' + match;

    parser = new DOMParser();
    xmlDoc = parser.parseFromString(httpGet( distURL ), "text/xml");
    var finRet = $(xmlDoc).find('duration').text()
    return finRet;
}

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, true );
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

我在 js 控制台中同时收到 NoApiKeys 和 SensorNotRequired 错误。我做错了什么？

这可能还有更多问题：

我不确定如何处理地址 1 中的空格（更糟糕的是，“匹配”）。
Duration 有两个子字段（一个是文本），不确定解析是否正确。请注意，我的查询在浏览器中正常工作（使用相同的 API 密钥），输出 XML 粘贴在下面：

<DistanceMatrixResponse>
    <status>OK</status>
    <origin_address>New York, NY, USA</origin_address>
    <destination_address>Philadelphia, PA, USA</destination_address>
    <row>
        <element>
            <status>OK</status>
            <duration>
                <value>5100</value>
                <text>1 hour 25 mins</text>
            </duration>
            <distance>
                <value>145447</value>
                <text>145 km</text>
            </distance>
        </element>
    </row>
</DistanceMatrixResponse>

有什么帮助吗？我试图做一些“简单”的工作而徘徊，但最终陷入了困境：|

【问题讨论】：

XMLHttpRequest 是异步的
至于 NoApiKeys 错误和 SensorNotRequired 警告 - 请在您加载谷歌地图 api 的位置显示脚本标签
您的代码 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access. 出现 CORS 错误，您是否有理由不使用 Google Maps Javascript API v3 中的 DistanceMatrix 服务？
我在 Chrome 扩展程序中执行此操作，因此周围没有 HTML。我不知道我们如何将地图 API 加载到其中（尽管我知道如何为 HTML 加载。）

标签： javascript xml google-maps

【解决方案1】：

我已经设法解决了这个问题：

首先，通过在扩展的 manifest.json 中包含以下内容，获取向地图 API 发出跨域请求的权限：

"permissions": ["https://maps.googleapis.com/"]

接下来，改变：

var finRet = $(xmlDoc).find('duration').text()

到

var finRet = $(xmlDoc).find('duration').find('text').text()

这是因为返回的 XML 有一个嵌套在持续时间标签内的文本标签。

最后，地图调用的 URL 中的空格实际上并没有任何区别。感谢大家的阅读和贡献。如果有的话，我仍在寻找更清洁的解决方案。

【讨论】：