如何使用 jQuery 的 Overpass API 获取 OSM 数据？答案

【问题标题】：How to get OSM data using Overpass API from jQuery?如何使用 jQuery 的 Overpass API 获取 OSM 数据？
【发布时间】：2015-07-18 14:27:50
【问题描述】：

我有以下代码用于从 OSM 请求地图数据：

$.ajax({
    url:
        'https://www.overpass-api.de/api/interpreter?' + 
        '[out:json][timeout:60];' + 
        'area["boundary"~"administrative"]["name"~"Berlin"];' + 
        'node(area)["amenity"~"school"];' + 
        'out;',
    dataType: 'json',
    type: 'GET',
    async: true,
    crossDomain: true
}).done(function() {
    console.log( "second success" );
}).fail(function(error) {
    console.log(error);
    console.log( "error" );
}).always(function() {
    console.log( "complete" );
});

当我在 Overpass Turbo 上测试请求时，它运行没有任何问题，但是在 JavaScript 中执行此请求时，我总是收到错误：

"<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en"/>  <title>OSM3S Response</title></head><body><p>The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.</p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Key expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: '!', '~', '=', '!=', or ']'  expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: Value expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: parse error: ',' or ']' expected - '%' found. </p><p><strong style="color:#FF0000">Error</strong>: line 1: static error: For the attribute "k" of the element "has-kv" the only allowed values are non-empty strings. </p></body></html>"

我提出请求的方式一定有问题，但我无法弄清楚它可能有什么问题。

如何通过 JavaScript 获取柏林所有学校的职位？

我也尝试过使用$.getJSON()，但这对我也不起作用。

【问题讨论】：

标签： javascript jquery ajax openstreetmap overpass-api

【解决方案1】：

您在示例中使用的 URL 似乎不完整：它应该是 ...interpreter?data=[out:json].... 即缺少 data= 部分。

作为参考，您还可以将查询放入 overpass turbo 中，然后直接从 Overpass API 中单击导出 -> 原始数据以获取有效的 URL。也许先用 wget 试试这个，如果成功，把 URL 放在你的 Javascript 代码中。

也许您还想研究一下，overpass turbo 如何（基于 POST）调用 Overpass API：详情请参阅https://github.com/tyrasd/overpass-turbo/blob/master/js/overpass.js#L581。

【讨论】：

抱歉，在发布我自己的答案之前没有刷新页面。哇，那个链接有很多不可读的代码：D，但还是谢谢！