在 OpenLayers 论坛发帖一周后没有收到我的问题的回复，我决定看这里。我用谷歌搜索和搜索，甚至发现了一个关于这个主题的精彩教程，用西班牙语，但写得很好，谷歌翻译能够完美地翻译它。
gisandchips.org/2010/05/04/openlayers-y-panoramio/
所以我遵循了本教程，现在我正在尝试访问 Panoramio 数据 API 来查询照片并将它们显示在我的地图上。但是，我的代码失败了：
var panoramio = json.read(response.responseText);
根据萤火虫和警报（response.responseText），我的responseText是一个空字符串......
在萤火虫中，我有 GET url
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。而且我知道我的响应对象不为空，因为 alert(response) 表明它正在获取 [object XMLHttpRequest]
老实说，我没有想法。在尝试解析 JSON 之前，我尝试解析 XML，但完全没有运气。我真的很喜欢将 RSS 和 API 数据放到我的地图上的想法。下面附上我的代码，感谢您提供的任何反馈:)
谢谢，
艾尔谢
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;
}