OpenLayers Format JSON يعيد سلسلة مسؤولية فارغة

Question

بعد أسبوع من النشر في منتدى OpenLayers وعدم تلقي ردود على أسئلتي ، قررت أن أنظر هنا. لقد غوغل و googled و googled ووجدت حتى برنامجًا تعليميًا رائعًا فيما يتعلق بهذا الموضوع ، باللغة الإسبانية ، لكن مكتوبة جيدًا لدرجة أن Google Translate كانت قادرة على ترجمته تمامًا.

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

لذلك تابعت هذا البرنامج التعليمي والآن أحاول الوصول إلى واجهة برمجة تطبيقات بيانات Panoramio للاستعلام عن الصور وعرضها على خريطتي. ومع ذلك ، فإن الكود الخاص بي يفشل في السطر:

var panoramio = json.read (reponse.Responsetext) ؛

وفقًا لـ Firebug and Alert (Response.Responsetext) ، فإن مسؤوليتي هي سلسلة فارغة ...

في Firebug لدي عنوان URLhttp://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 صالح. وأنا أعلم أن كائن الرد الخاص بي ليس فارغًا لأن التنبيه (الاستجابة) يوضح أنه يحصل على [كائن 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;
}

Answer 1

يبدو أنك صدمت نفس سياسة الأصل. لا يمكنك تقديم طلبات Ajax إلى المضيفين خارج نطاقك ، إلا إذا كنت تستخدم JSONP, ، أو بعض التقنيات الأخرى للتغلب على السياسة. طلبك إلى www.panoramio.com هي المشكلة ، لأنني لا أعتقد أنك استضافت على www.panoramio.com :)

قد ترغب في التحقق مما إذا كان Panoramio يقدم خدمة JSONP. وإلا ، يمكنك الاطلاع على منشور STACK Overflow التالي للحصول على بعض الحلول الشائعة للعمل حول نفس سياسة الأصل (بشكل رئيسي JSONP ، CORS وطرق الوكيل العكسي):

• طرق للتحايل على سياسة الأصل من نفس

وفارغة responseText هو نموذجي لمعظم المتصفحات عندما يمنعون الاستجابة من نطاقات الطرف الثالث:

• مسؤولية فارغة من xmlhttprequest