使用 REST 在 Google 地图上显示 Panoramio 缩略图层

Question

我正在尝试通过 Panoramio 在我的 Google 地图上显示一层缩略图。 Panoramio 是 RESTful 的，其主页声明必须在 API url 上提交简单的 GET 请求。

我在 REST 方面没有太多经验，我只是尝试让 API 以文本响应，然后我才能处理应该由调用产生的 JSON。我对 AJAX 没有太多经验，可以指出我正确的方向吗？到目前为止，这是我的相关代码：

**HTML**
<div class="backdiv-pix"></div>

**JS**
var xmlhttp = new XMLHttpRequest();
var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-180&miny=-90&maxx=180&maxy=90&size=medium&mapfilter=true"
xmlhttp.open("GET", thumbUrl, true)
xmlhttp.send();
document.getElementById('backdiv-pix').innerHTML=xmlhttp.responseText;

我的浏览器出现以下错误：

无法设置属性“innerHTML”为空

我们将不胜感激。

MS

Answer 1

您的代码中没有带有id="backdiv-pix" 的div。要么改变：

<div class="backdiv-pix"></div>

收件人：

<div id="backdiv-pix"></div>

或使用document.getElmentByClassName('backdiv-pix')[0].innerHTML=xmlhttp.responseText

但是，一旦你改正了那个错字，你就需要处理这个问题：

XMLHttpRequest cannot load http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-180&miny=-90&maxx=180&maxy=90&size=medium&mapfilter=true. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

working fiddle

代码 sn-p：

var xmlhttp = new XMLHttpRequest();
var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-180&miny=-90&maxx=180&maxy=90&size=medium&mapfilter=true&callback=?"
$.getJSON(thumbUrl, function(data) {
  document.getElementById('backdiv-pix').innerHTML = JSON.stringify(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backdiv-pix"></div>