Openlayers Format JSON zurückgibt Leere response String

Question

Nach einer Woche im Openlayers Forum der Entsendung und nicht die Antworten auf meine Fragen empfangen, habe ich mich entschlossen, hier zu sehen. Ich habe gegoogelt und gegoogelt und gegoogelt und fand sogar eine wunderbare Tutorial zu diesem Thema, in Spanischen, aber so gut geschrieben, dass Google war in der Lage zu übersetzen es perfekt zu übersetzen.

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

Also habe ich dieses Tutorial gefolgt und jetzt versuche ich, die Panoramio-Daten-API, um die Abfrage Fotos zugreifen und sie auf meiner Karte anzuzeigen. Allerdings mein Code nicht auf der Zeile:

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

Nach Firebug und alert (response.responseText), meine response ist ein leerer String ...

In Firebug ich die URL erhalten haben 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

Das zeigt mir gültig JSON. Und ich weiß, meine Antwort Objekt ist nicht null, weil alert (Antwort) zeigt, dass es immer ein [Objekt XMLHttpRequest]

Ehrlich gesagt bin ich von Ideen aus. Bevor Sie versuchen, JSON zu analysieren, ich habe versucht, XML zu analysieren und hatte absolut kein Glück. Ich mag die Idee von oben ziehen RSS und API-Daten auf meine Karte. Im Folgenden werde ich meinen Code bin Befestigung, ich schätze jedes Feedback bieten Ihnen:)

Danke,

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

Es sieht aus wie Sie in den Same Origin Policy . Sie können nicht Ajax-Anfragen zu Hosts außerhalb Ihrer Domain machen, es sei denn, Sie verwenden JSONP oder einige andere Technik, um die Politik zu umgehen. Ihre Anfrage www.panoramio.com ist das Problem, da ich glaube nicht, dass du auf dem www.panoramio.com gehostet:)

Möchten Sie folgende überprüfen, ob panoramio einen JSONP Service anbieten. Andernfalls könnten Sie die folgende Stack-Überlauf Post für einige beliebten Lösungen für Arbeit rund um die Same Origin Policy Check-out (vor allem der JSONP, CORS und Reverse-Proxy-Methoden):

• Möglichkeiten, die Same Origin Policy zu umgehen

Und leer responseText ist typisch für die meisten Browser, wenn sie die Antwort von Dritt-Domänen blockieren:

• leere response von XMLHttpRequest