OpenLayers formato JSON está volviendo vacío responseText Cadena

Question

Después de una semana de la publicación en el foro OpenLayers y no recibir respuestas a mis preguntas, he decidido buscar aquí. He buscado en Google y Googled y Googled e incluso encontrado un tutorial maravillosa relación con este tema, en español, pero tan bien escrito que Google translate fue capaz de traducir a la perfección.

gisandchips.org/2010/05/04/openlayers-y-panoramio /

Así que he seguido este tutorial y ahora estoy tratando de acceder a la API de datos de fotos Panoramio de consulta y mostrarlos en mi mapa. Sin embargo, mi código falla en la línea:

var panoramio = json.read (response.responseText);

De acuerdo con quemador, y la alerta (response.responseText), mi responseText es una cadena vacía ...

En Firebug tengo la 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

Este me muestra JSON válida. Y sé que mi objeto respuesta no es nulo, porque muestra alerta (de respuesta) que se está haciendo un [objeto XMLHttpRequest]

Sinceramente estoy fuera de ideas. Antes de intentar analizar JSON, que estaba tratando de analizar XML y no tenía absolutamente ninguna suerte. Me gusta mucho la idea de sacar datos de la API y RSS en mi mapa. A continuación os adjunto mi código, agradezco cualquier comentario que puede ofrecer:)

Gracias,

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;
}

Answer 1

Parece que ha chocado con la mismo Política de Origen. No se puede hacer peticiones Ajax a los ejércitos fuera de su dominio, a menos que utilice JSONP , o alguna otra técnica para moverse por la política. Su solicitud de www.panoramio.com es el problema, ya que no creo que estés alojado en el www.panoramio.com:)

Es posible que desee comprobar si Panoramio ofrecer un servicio JSONP. De lo contrario, se puede consultar el siguiente mensaje de desbordamiento de pila durante unas soluciones populares al trabajo alrededor de la política del mismo origen (principalmente el JSONP, CORS y métodos proxy inverso):

• formas de burlar la política del mismo origen

Y responseText vacío es típico de la mayoría de los navegadores cuando bloquean la respuesta de los dominios de terceros:

• Vacía responseText de XMLHttpRequest