После недели публикации на форуме OpenLayers и не получения ответов на мои вопросы, я решил посмотреть здесь. Я использовал Googled, Googled и Googled и даже нашел замечательное учебное пособие по этой теме на испанском языке, но настолько хорошо написанное, что Google translate смог его перевести отлично.
gisandchips.org / 2010/05/04 / OpenLayers-у-Panoramio /
Итак, я следовал этому руководству и сейчас пытаюсь получить доступ к API данных Panoramio для запроса фотографий и отображения их на моей карте. Тем не менее, мой код терпит неудачу в строке:
var panoramio = json.read (response.responseText);
Согласно firebug и alert (response.responseText), мой responseText представляет собой пустую строку ...
В firebug у меня есть URL 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. И я знаю, что мой объект ответа не является нулевым, потому что alert (response) показывает, что он получает [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;
}