使用 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' 为 null

一些指导将不胜感激。

女士

Answer 1

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

<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

代码片段：

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>

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

Displaying Panoramio thumbnail layer on Google Maps using REST

google-maps

panoramio