在OpenLayers论坛发帖一周后，我没有收到对我的问题的答复，我决定看看这里。我用谷歌搜索和谷歌搜索，甚至用西班牙语找到了一个关于这个主题的精彩教程，但写得非常好，谷歌翻译能够完美地翻译它。
gisandchips.org/2010/05/04/openlayers-y-panoramio /
所以我已经按照本教程进行操作，现在我正在尝试访问Panoramio数据API以查询照片并将其显示在我的地图上。但是，我的代码在行中失败了：
var panoramio = json.read（response.responseText）;
根据firebug和alert（response.responseText），我的responseText是一个空字符串......
在萤火虫中，我有GET网址
http://localhost/cgi-bin/proxy.cgi?url=http%3A%2F%2Fwww.panoramio.com%2Fmap%2Fget_panoramas.php%3Forder%3Dpopularity%26set%3Dfull%26from%3D0%26to%3D40%26minx%3D-20037508.3392%26miny%3D-20037508.3392%26maxx%3D20037508.3392%26maxy%3D20037508.3392%26size%3Dthumbnail
这显示了我有效的JSON。而且我知道我的响应对象不是null，因为alert（响应）显示它正在获取[object XMLHttpRequest]
老实说，我没有想法。在尝试解析JSON之前，我试图解析XML并且绝对没有运气。我非常喜欢将RSS和API数据提取到我的地图上的想法。下面我附上我的代码，感谢您提供的任何反馈：）
谢谢，
elshae
var map, popup, selectControl, selectedFeature;
var vectorLayer, panoramio_style;
Ext.onReady(function () {
var options = {
controls: [new OpenLayers.Control.Navigation()], //Needed to use GeoExt controls such as the zoomslider
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
units: 'm',
allOverlays: false
}
this.map = new OpenLayers.Map(options);
var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid",
{type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{type: google.maps.MapTypeId.ROADMAP, numZoomLevels: 20}
);
var gphy = new OpenLayers.Layer.Google(
"Google Physical",
{type: google.maps.MapTypeId.TERRAIN, numZoomLevels: 20}
// used to be {type: G_PHYSICAL_MAP}
);
var osm = new OpenLayers.Layer.OSM();
map.addLayers([osm, gphy, gmap, ghyb]);
OpenLayers.ProxyHost = "http://localhost/cgi-bin/proxy.cgi?url=";
var mapPanel = new GeoExt.MapPanel({
title: "Map",
map: this.map,
center: new OpenLayers.LonLat(93.9, 29.53).transform(new OpenLayers.Projection("EPSG:4326"),
new OpenLayers.Projection("EPSG:900913")),
zoom: 2,
region: "center"
});
//Obtain Bbox coords
var proj = new OpenLayers.Projection("EPSG:900913");
var ext = mapPanel.map.getMaxExtent().transform(mapPanel.map.getProjectionObject(), proj);
var minx = ext.left;
var miny = ext.bottom;
var maxx = ext.right;
var maxy = ext.top;
alert(minx + " " + miny + " " + maxx + " " + maxy);
url = "http://www.panoramio.com/map/get_panoramas.php";
var parameters = {
order: 'popularity',
set: 'full',
from: 0,
to: 40,
minx: minx,
miny: miny,
maxx: maxx,
maxy: maxy,
size: 'thumbnail'
}
new Ext.Panel({
width: 1800,
height: 600,
layout: "border",
renderTo: document.body,
items: [mapPanel]
});
OpenLayers.loadURL(url, parameters, this, showPhotos);
//alert(OpenLayers.Request.XMLHttpRequest);
});
function showPhotos(response) {
var json = new OpenLayers.Format.JSON();
var panoramio = json.read(response.responseText); //Something is wrong here!!!
var features = new Array(panoramio.photos.length);
for (var i = 0; i < panoramio.photos.length; i++) {
var upload_date = panoramio.photos[i].upload_date;
var owner_name = panoramio.photos[i].owner_name;
var photo_id = panoramio.photos[i].photo_id;
var longitude = panoramio.photos[i].longitude;
var latitude = panoramio.photos[i].latitude;
var pheight = panoramio.photos[i].height;
var pwidth = panoramio.photos[i].width;
var photo_title = panoramio.photos[i].photo_title;
var owner_url = panoramio.photos[i].owner_url;
var owner_id = panoramio.photos[i].owner_id;
var photo_file_url = panoramio.photos[i].photo_file_url;
var photo_url = panoramio.photos[i].photo_url;
var fpoint = new OpenLayers.Geometry.Point(longitude, latitude);
var attributes = {
'upload_date': upload_date,
'owner_name': owner_name,
'photo_id': photo_id,
'longitude': longitude,
'latitude': latitude,
'pheight': pheight,
'pwidth': pwidth,
'pheight': pheight,
'photo_title': photo_title,
'owner_url': owner_url,
'owner_id': owner_id,
'photo_file_url': photo_file_url,
'photo_url': photo_url
}
features[i] = new OpenLayers.Feature.Vector(fpoint, attributes);
}//Outside for loop
panoramio_style = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
pointRadius: 7,
fillColor: "red",
fillOpacity: 1,
strokeColor: "black",
externalGraphic: "panoramio-marker.png"
}, OpenLayers.Feature.Vector.style["default"]));
vectorLayer = new OpenLayers.Layer.Vector("Panoramio Photos", {
styleMap: panoramio_style
});
vectorLayer.addFeatures(features);
this.map.addLayer(vectorLayer);
selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
this.map.addControl(selectControl);
selectControl.activate();
}//End showPhotos
// popups
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
// HTML del PopUp
var html = "some HTML I have here";
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
html,
null,
true,
onPopupClose);
feature.popup = popup;
this.map.addPopup(popup);
}
function onFeatureUnselect(feature) {
this.map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
答案 0 :(得分：3)
看起来你碰到了Same Origin Policy。您不能向域外的主机发出Ajax请求，除非您使用JSONP或其他一些技术来绕过策略。您对www.panoramio.com的请求是问题所在，因为我认为您不会托管www.panoramio.com：）
您可能想要检查panoramio是否提供JSONP服务。否则，您可以查看以下Stack Overflow帖子，了解一些流行的解决方案，以解决同源策略（主要是JSONP，CORS和反向代理方法）：
空responseText是大多数浏览器阻止第三方域响应时的典型代码：